[항해99 주특기] 1주차 강의 내용 - React

리액트란?  

자바스크립트 라이브러리이다 사용자가 보는 부분을 만들 수 있는 라이브러리로써

프론트엔드를 구축(ui를 building한다) 할때 쓰인다

spa기반의 프론트엔드 개발 프레임워크 중 하나이다

 

SPA 아키텍쳐란?

단 한개의 페이지로 이루어진 애플리케이션 (single page application) <==> MPA

장점

• 클릭할때마다 리렌더링 된다면 엄청 불편할텐데 하나의 페이지에서 그 부분만 업데이트 된다. 
• (깜빡임 없는 자연스러움)
• 서버에 1회 리소스 요청하고 그이후에는 데이터만 받아와서 기존 페이지를 수정해주는 방식이다.
  ux가 굉장히 높다
• react native와 상생 vr에서까지 활용 가능

 

단점

 

• seo(search engine opiomization)를 극복해야한다 next를 이용하자

html이 하나밖에 없기 때문에 검색 엔진이 찾을 수가 없다. (검색엔진은 html을 기반으로 찾기때문에)

---

리액트에서 자주 사용하는 문법

1. 상수와 변수

상수 : const

변수 : let

 

2. object 선언 (key value pair)

value 값으로 함수도 올 수 있고 어떠한 값도 올 수 있다는 것을 기억하자

키와 밸류가 같은 경우 생략해서 사용 할 수 있다 age: age ==> age

 

3. 복사하는 것에 대한 개념

복사를 할 때 객체를 새로 만들어서 해야하는데 그 이유는 그냥 할당하는 방식으로 복사를 한다면 주소값을 주는 모습이기 때문에 원본의 내용을 바꾸게 된다면 복사한 객체의 내용도 자동으로 바뀌게 된다. 이러면 상호간의 불변성을 유지하기 힘들기에 객채를 복사할 때는 spread 함수나 immer Hook 등 이용해야한다.

Json.parse(JSON.stringify()) <- 이거 한번 찾아보자 얕은복사의 방법이라는데 뭔 의미인지 알아야 할듯

---

1. 템플릿 리터럴``써서 하는거 ``안에는 ${변수명}을 선언 할 수 있다  멀티라인도 가능하기 떄문에 \n 이거보다 훨씬 가독성이 좋다.

 

2. 배열 객체 비구조화 ** (구조분해할당)구조를 분해해버리는 것 const{name , age} = person; person이라는 객체를 뜯어버리자~없는 놈을 지정했을때에는 undifined가 나온다배열을 할 때에는 위치(index)에 맞춰서 분해가 된다

 

3. spread 연산자

 

4. 화살표함수

생략가능한 모습은 return이 한줄일 때 return 뺴고 중괄호 빼고 모습 잘 기억하자 return이 한줄이란 것을 기억해라!

---

리액트 세팅하기크롬=> vscode => git(버전관리 툴) 1. yarn과 npmnpm이란 node package manager 패키지 다운받아 활용할 수 있게 해주는 녀석 (마켓) yarn도 npm이랑 비슷한 패키지임 크게 다른 것은 없음

 

차이점

npm은 노드 깔 때 자동으로 깔린다 yarn이 속도가 더 빠르다 보안도 좋다

 

명령어 정리해

 

2. 런타임환경이란노드환경과 브라우저환경을 구분할 줄 알아야한다 자바스크립트는 두개의 환경에서 작동한다

---

1.creat react app( CRA )한줄의 명령어로 필수요소를 자동으로 구성하는 방법임 원래는 엄청 많지만 이거 한줄로 다 된다라는 것이런것을 보일러 플레이트라고 한다.

 

2. index.html에서는 뭘하냐?아이디가 루트인 디브 하나만 있는데 이게 뭔가 인덱스 제이에스로 가면 그거 찾아서 돔 만들어주라는 놈이 있고 화면에 그려주세요 랜더해주세요 app.js를 통해서 그러니 app.js 가 우리의 플레이그라운드이다.

 

3. 상대경로 => 절대경로임포트 하는부분에서 ./ 되어있는건데 src경로에 잇는거 절대경로로 해주세요  이거 방법은 한번 확인해보자 좀 괜찮은거 같은데 

---

1. 컴포넌트는 무엇인가

함수형과 클래스형이 있다

재사용이 가능한 개별적인 여러조각으로 나눈고 개별적으로 살펴 볼 수 있다 개념적으로는 함수와 유사하다  함수형만 사용하자~ 

 

2. 컴포넌트 구조 알아보자

임포트 부분 익스포트부분 자바스크립트를 쓸 수 있는 부분(리턴문위까지) 세부분으로 크게 나뉜다

리턴문 안에 문법은 jsx문법이다 javasciipt+ xml - html이다.

컴포넌트의 이름은 무조건 대문자이고 

컴포넌트 안JSX영역에서 적용을 해줄 때는 객체를 넣어주면 되니깐 중괄호가 2개 적혀있는게 어색할 수 있다.

---

1.부모자식 컴포넌트

리턴에 자식컴포넌트가 들어오고 자식컴포넌트를 불로오는 import를 설정하면 된다 누가 자식인지 부모인지를 알아야한다. 반복되는 컴포넌트일 때 사용하면 된다라는데 그건 나중에 다른걸로 처리하니깐 일단 관계구조만 알아보자.

 

---

1.jsx문법에 대해서 알아보자

자바스크립트를 확장한 문법 리턴부분 안에 들어가는 문법임

돔에대해서도 알아야겠구만 jsx에서 쓰는 div는 돔요소가 아니라 리액트요소이다. 차이는 가상돔을 배우면서 알게 된다

닫는tag는 반드시 있어야한다 최상위태그로 감싸줘야한다중괄호를통해 js를 불러온다jsx문법은 객체를 주어야한다는 것을 항상 기억하자2. 깔아야할 앱임

rsfc 스니펫임 react snippet 설치해서 사용해보자

 

3. 삼항연산자 활용

---

1. props컴포넌트의 정보 교환 방식 부모가 자식에게 물려준 데이터부모에서 자식방향으로만 흐른다 읽기전용으로만 취급해서 변경하지 않는다props drilling 은 무엇인가?props를 전달하는 방식을 기억하자 정보 전달하는 방식 컴포넌트에서 선언을 하고 자식은 인자를 받는 것을 기입해놓으면 됨props는 전달되는 과정이 객체로써 전달되기 떄문에 사용하려면 props.전달한이름 이런식으로 자식 컴포넌트에서 불러서 사용할 수 있다. 근데 이 단순한 방식은 중간다리가준내많이 생긴다그래서 쓰는것들이 있는데 그게 redux임 이게 prop drilling이구나

 

---

1. props children부모컴포넌트에 자식컴포넌트의 여는 태그와닫는 태그 안에 무언가를 적으면 칠드런으로 자식컴포넌트에 전달이 된다 이것도 porps 객체 안의 값으로 전달 됨이거는 한번 더 봐도 좋을 것같은데 전달하는 방식 까먹기 쉬울듯

---

1. props 를 주고받는 방식

구조분해할당을 잘 이해해야 한다.

자식컴포넌트에서 전달받는 객체를 구조분해할당으로 찢어서 인자로 받으면 바로 그 이름으로 사용할 수 있다

default props 부모가 전달해주지않아도 설정된 초기값이 있다.

자식컴포넌트에서 default 세팅을 할 수 있다 child.defaultProps = {} 이런식으로 설정하면 된다

부모로 부터 안내려온 props 의 값은 undefined 로 온다

 

2. js파일을 jsx파일로 바꿔도 되는 경우는 컴포넌트이다 return문에 jsx문법이 들어간다면 jsx파일로 바꾸어주는게 보기 편하다 둘다 차이점이 없다!! 컴포넌트는 jsx로 해주자

---

1. useState 훅에 대해 알아보자왜 써야하냐? state 를 쓰는 목적은 UI를 바꾸기 위해서이다.리액트에서 제공하는 API (함수라고 생각하자)리액트 안에서 변경되는 값에는 무조건 useState 써서 state로 관리하자

onChange를 사용하면 항상 event가 딸려온다(매개변수로 e 넣는거를 출력해보자)

event.target.value 하는게 이벤트 객체를 찍어보면 왜 이걸 치는지 알겠네

---

1 불변성리액트 생명주기를 한번 찾아보자(컴포넌트의 생명주기)state와 불변성의 관계에 대해서 잘 알아보자메모리에 있는 값을 변경할 수 없는 것이 불변성일치연산자와 동등연사자를 좀 알아볼까??원시데이터(숫자문자불리언..) 아닌것들(배열 객체 함수...)원시데이터는 메모리에 저장된 값을 같이 바라보고 있고아닌것들은 따로 공간에 저장해서 그 주소를 바라보기때문에 같은 값이여도 다른 주소를 바라보고있다 그래서 원시데이터는 ===을 썼을떄 true가 나오고 아닌것들은 false가 나온다.그러므로 원시데이터의 값을 재할당한다면 이전 값은 메모리에 저장되어있고 새롭게 메모리에 재할당하는 값을 만들어 그것을 바라본다 그러므로 바라보는 것이 달라졌지만 이전 값이였던 것을 바꾸는 것이 아니라 다른것을 바라보기때문에 불변성이 있다!!!아닌것들은 애초에 주소를 바라보고 있기에 값을 수정하게 된다면 불변성이 유지되지 않는다. 그 안에 있는 값이 수정되고 그 값을 바라보는 주소는 변함이 없기에 값이 직접적으로 바뀌어 불변성이 유지된다.

 

2.랜더링이 되는 조건state가 바뀌면 랜더링된다. setstate가 바뀌지 않고 단순 변수가 바뀐다면 당연히 랜더링되지 않는다불변성을 지켜준다는 것이 중요한 이유가 나오는데 알거 같음 객체 안의 값이 바뀐다고 랜더링되는게 아니라 객체의 주소를 바꿔야 불변성이 유지되는구만 이래야 랜더링이 되고

 

3. 불변성을 유지하기 위한 spread새로운 객체를 만들어줘서 그걸 바라보게 해야 불변성이 유지되고 그래야 랜더링이 된다.

---

1. 컴포넌트리액트의 핵심 블록이며 선언체이다. 명령형 vs 선언형jsx를 이용해서 선언해 놓은 화면요소를 리액트가 그려주었다 그래서 리액트가 선언체이다돔객체를 직접 조작했다 동적으로 변하는 ui를 표현하기 위해쿼리셀렉터 아이디나 클래스를 가지고 찾는 것 (명령형)명령형은 어떻게를 중요시 여긴다 목표를 명시 안한다 선언형은 무성을 중요시 여긴다.

 

돔(명령형)예시 보자 자료에있는리액트(선언형)ui를 선언하고 render를 통해 호출한다리액트 안에서 이미정해져 있다(jsx)명령형으로 하면 관리가 어렵기때문에 직관적인 선언형이 좋은 것이지 명령형이 나쁘다는 것이 아니다.

 

2.랜더링props와 state의 상태에 기초하여 ui를 어떻게 구성할지 컴포넌트에게 요청하는 작업트리거링 => 랜더링 => 커밋한다(끝났다)ui를 주문하고 주방으로 전달 => 주방에서 컴포넌트가 ui를 만들고 준비 => 준비된 ui를 손님께 준다

 

버츄얼돔에 대해서 나중에 다룬단다 

 

3.리랜더링의 과정컴포넌트 상태에 변화가 생기면 리랜더링이 발생한다 stste의 변경을 감지 한 후 그에 따라 리랜더링이 일어나면서 컴포넌트는 새로운 변경 사항을 토대로 ui를 만들어서 이를 커밋한다(DOM에 반영)

 

---

실습1 카운터 앱 만들기

---

1.styling, map객체 형태로 style을 넣는것과 css 형태로 빼낸 것 2가지로 style을 꾸며보자프로젝트를 압축해서 옮긴다면 node modules를 삭제하고 보내라 이게 파일이 엄처 ㅇ쓰다 이후 npm i 만 입력해주면 알아서 다깔린다 yarn 은 어카누?? package.json에 dependance에 저장되는 것을 가져오는것임

 

꺠알 css 용어gap padding 대신 쓰네

 

2. css 분리해보자임포트로 css 불러오는 거 적고 css파일 만들면 되는구나 차이점은 객체선언했을때와 css파일에 적는것 중 css 파일에 적는게 더 간단하네 객체니까 value를 "asdf" 식으로 적어야되는데 그렇게 안해도 됨 개꿀쓰

 

커멘드 d 누르면 동등한 애들을 찾아주는구만

---

1.map && filter 반복되는 컴포넌트를 다루어보자 배열을 다루는 방법을 배우고 다루어보자 이후에는 객체도 한번 다루어보고 ㄱㄱmap은 원래 데이터를 가공하여 출력하는 방법이다.자바스크립트문법이기때문에 map함수를 return 안에 쓸때는 {} 안에 쓰자filter 랑 map은 아는 내용이니깐 

---

 1. 반복되는 컴포넌트 정복해봅시다.키가 필요하다는 warning이 뜨는데요 반복적으로 만든 놈들이 아이디가 각각 있어야 하는데 이때 만들어놓는놈에 key를 넣어주어야한다 반복적으로 되는 놈들은 key가 꼭있어야한다 버츄얼돔에서 설명해준다고 함객체로 그냥 선언해 놓은 애들은 변경될때마다 랜더링이 안된다 그러니까 state형태로 넣어야 랜더링이 되는 놈들이 만들어 지는 것이다 이거 구조를 잘 이해하자$nbsp 띄어쓰기로 인식되니깐 한번씩 봐보자따로 빼서 함수를 만들어 놓을 때 컴포넌트에다가 인자로 이벤트를 줄때는 함수실행형태로 줘라 아니면 그냥 변수명만 주고받아오고싶은 값이 있을 경우에는 선언형태로 함수를 해야된다 꼭꼮꼬고꼬꼬꼮ㄲ꼮꼮아이디를 가져오고 싶은경우라던지 그런경우라던가 어쨌든 알아먹어