Todo
📗 자바스크립트 마스터북 🔺
💻 GraphQL맛보기(Server만들기) ✔
💻 Svelte
💻 React 공식 문서로 디테일 잡기(고급) ✔
Error & Solution
What I learned
React 공식 문서로 디테일 잡기(고급)
- Composition
- 컴포넌트에 컴포넌트 담기
- 담는방법은 Children, Custom
- typeof로 타입 체크
- 다양한 상황을 품을 수 있도록 계속 확장하며 사용 가능
- HOC
함수를 받아서 함수를 리턴, 컴포넌트를 받아서 컴포넌트를 리턴 - Memoization
메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.
- React.memo
동일한 props로 렌더링 한다면, React.memo를 사용하여 성능 향상을 누릴 수 있다. mome를 사용하면 React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다. - React.memo는 HOC/Props 비교하여 메모한다.
- 성능 파악을 위해서 Profiler라는 api를 사용
- 함수를 메모제이션할 때에는 useCallback을 사용
- 변수를 메모이제이션할 때에는 useMemo를 사용
- Context
- 컴포넌트 트리를 넘어 데이터를 공유할 수 있는 방법(Props drilling의 한계 해소)
- 재사용하기는 어렵다
- careateContext, Provider, Consumer
- Portals
- DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법
- createPortal을 사용해 부모 컴포넌트 DOM 트리로부터 벗어난다
- 이벤트는 Portal에 있더라도 트리로 전파된다.
- Render Props
- render props를 사용해 무엇을 렌더링할 지 알려주는 함수
- render일 필요는 없고 children도 되고 뭐든 된다
- PureComponent와 render props는 잘 맞지 않는다.
- PropTypes
- Props의 타입을 확인하기 위한 도구(like, Flow, TypeScript같은 정적 타이핑 도구)
- 개발 모드에서만 동작하고 유효하지 않은 prop에 대한 경고
- RegExp 등으로 사용자 정의가 가능하다.
- Reconciliation
- UI 갱신에 대한 React의 접근법
- 루트로부터 비교해서 무엇을 렌더링할 지 알려주는 함수
- 부모가 바뀌었다면 트리를 파괴한다.
- 자식 재귀 처리 시 효율성을 확보한다.
- Virtual DOM은 가상의 표현을 메모리에 저장하고 실제 DOM과 동기화하는 과정(재조정)
Thinking
국비학원 다니면서 Rest API를 해봤다고 GraphQL이 어렵지 않았다. 새삼 뿌듯.
