글을 읽고 정리했다.
리액트 리렌더링은 매우 빈번하다. state의 변경을 파악하기 위해서다.
(총 3가지 이유로 리렌더링된다. 부모 요소가 리렌더링되거나, Props가 변경되거나, State가 변경되거나)
자식이 많은 부모 요소는 리렌더링 시 많은 연산을 하게 된다.(실제 DOM이 아닌 Virtual DOM을 생성하기 위한 리렌더링이다.)
이 경우 React.memo를 쓸 수 있다. 내려줄 props 값들을 메모리에 저장해서 이 값이 변경된 경우에만 자식 컴포넌트를 렌더링시킨다.
메모리 저장과 비교 연산의 비용과 리렌더링 비용을 비교해서 판단해야 한다.
리렌더링 시마다 JSX 위쪽 함수들도 재생성된다.
동일한 기능의 함수라 해도 js는 다른 것으로 판단하기 때문에(func !== func)
props에 함수를 넣을 경우 memo로도 리렌더링을 막지 못한다!
이럴 때 useCallback을 쓰면 된다. 이걸로 감싸면 더이상 리렌더링 시마다 재생성하는 게 아니라 메모리(클로저)에 저장해 함수를 불러오므로 동일성을 보장하여 React.memo가 잘 작동된다.
