memoization을 통한 최적화
- memoization를 하기 위한 React의 방법들
- 메모(기억)을 한다. 캐시 같은 곳에 저장해서 그때그때 찾아서 쓴다.
- 불필요한 렌더링이 발생하지 않도록 하기 위해 사용한다.
- React.memo, useCallback, usememo(값을 기억 : 객체나 배열이나 함수가 이에 해당)
무조건 쓰면 좋으냐 ? no : 가벼운 하위 컴포넌트에 전부 다 써주면 캐시를 어마어마하게 잡아 먹기 때문에 오히려 안쓰는게 최적화에 더 효율적이다.
props에서 변화가 너무 많이 일어나면 오히려 안쓰는 것이 효율적이다.
번외 : div태그만 쓰면 seo에 안좋다. 검색할 때 태그도 다 반영하기 때문에
리렌더링의 발생 조건
- 컴포넌트에서 State가 바뀌었을 때
- 컴포넌트가 내려받은 Props가 변경되었을 때
- 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두
React.memo
- 컴포넌트를 캐싱
- 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두 리-렌더링 된다.
- 1번 컴포넌트가 리렌더링 된 경우 2~7번 모두 리렌더링 된다.
- 2번 컴포넌트가 리렌더링 된 경우 4~7번 모두 리렌더링 된다.
❌ 문제 : 자녀 컴포넌트의 입장에서 바뀐게 없을 때 리렌더링 되는 것이 비효율적일 수 있다.
💡 해결 :React.memo를 사용한다.
useCallback
- 함수를 캐싱
useMemo
- 값을 캐싱
- 동일한 값을 반환하는 함수를 계속 호출하는 등 불필요한 렌더링을 할 때 사용한다.
- 맨 처음 해당 값을 반환할 때 그 값을
특별한 곳(메모리)에 저장=> 필요할 때마다 다시 함수를 호출하는 것이 아니라 이미 저장한 값을 꺼내와서 쓴다.
