주말에 푹 쉬었는데 어제 밤부터 몸살기운이 생겨서 오늘은 컨디션이 엄청 저조했다..
왜 푹쉬고나서 몸살이 걸린건지 모르겠지만.. 그래도! 주말동안 하려고 했던 일을 못했기 때문에 오늘 열심히 공부했다.
오늘 특강 들으면서 메모한걸 적어둬야겠다. 일단 과제로 markdown으로 공부한거 제출하는 부분이 있으니까 메모한거랑 강의자료 보면서 더 공부해야겠다.
React 특강
등장배경도 알아야 기술을 쓰는 이유를 알아야 된다.
바닐라 js의 한계점
- 유지보수의 어려움
- DOM 조작의 비효율성
- 재사용성 부족
http 즉, 서버와 통신하는 페이지가 하나의 페이지로 파악함
seo : search engine optimization
가상 DOM : 실제 DOM보다 빠르게 UI 변경사항을 관리한다.
전체 페이지를 불러오는게 아니라 변경이 필요한 부분만 확인하기때문에 저렴하고 가볍게 사용하게된다.
이 때 가상돔은 두개가 필요하다.(전 가상돔, 바뀐 가상돔)
jsx는 js를 확장한 문법이다. html과 유사하지만 완전 다른것이다.
js와 결합할 수 있다.
component와 element
component 는 함수이다.
element는 함수를 jsx로 표현한 것.
state
컴포넌트 내부의 데이터
state가 바뀌면 component를 리렌더링하게 만들어놨기 때문에
변수에 저장하는게 아니라 state로 리렌더링이 필요한 데이터를 저장하는 것이다.
변수에 저장하면 값은 바뀔지 모르지만 리렌더링이 안된다.
리렌더링한다는 것은 함수가 재실행된다는 것이다.
state의 값을 재실행(리렌더링)되어도 어딘가에 저장해두고 그 값을 돌려주는 것..
props
react는 컴포넌트 여러개를 조립해서 만든것.
부모 컨포넌트와 자식 컨포넌트가 있다.
→ 이때 컨포넌트를 조립하면서 값들을 넘겨주고 싶을 때 쓰는 것을 props라고 한다.
props는 읽기 전용으로만 사용해야한다 (재할당하면 절대 안됨)
리렌더링의 조건(가장중요)
- state가 변경되면 컴포넌트는 리렌더링된다.
- 부모 컨포넌트로부터 전달 받는 props의 값이 변경되면 컴포넌트는 리렌더링 된다.
- 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 리렌더링 된다.
→ 부모만 바뀌고 자식은 데이터가 바뀌는게 없는데 리렌더링된다? 조금 손해.
3번같은 것 때문에 React.memo가 생겼다.(최적화를 위해 해야될 기본적인것)
모든 것에 memo를 다 넣을까 그럼? > 불필요하게 자식 컴포넌트가 리렌더링되는것을 막기 위해 memo도 저장하는 것이기 때문에 메모리 남용으로 바람직하지 않다.
React Component의 생애주기
Mount-update-unmount
