React 최적화: 무엇, 언제, 왜

Source: Dev.to

React.memo (컴포넌트 메모이제이션)

무엇을 하는가:
함수형 컴포넌트를 감싸서, 자식 컴포넌트의 props가 이전 렌더링과 동일하면 React가 해당 컴포넌트의 재렌더링을 완전히 건너뜁니다. 컴포넌트의 “문지기” 역할을 합니다.

언제 사용할까:
props가 실제로 변하지 않음에도 불구하고 자주 재렌더링되는 느린 컴포넌트가 있을 때.

useMemo (값 메모이제이션)

무엇을 하는가:
계산 함수의 결과값을 메모이제이션합니다. 의존성 배열에 명시된 변수들이 변할 때만 계산을 다시 수행합니다.

언제 사용할까:
컴포넌트 내부에서 무거운 연산(예: 필터링, 대규모 합산, 정렬 등)을 수행하고, 매 렌더링마다 다시 실행되는 것을 방지하고 싶을 때.

useCallback (함수 메모이제이션)

무엇을 하는가:
함수 자체의 레퍼런스를 메모이제이션합니다. 매 렌더링마다 JavaScript가 다른 메모리 주소에 새로운 함수를 생성하는 것을 방지합니다.

언제 사용할까:
거의 언제나 React.memo 로 최적화된 자식 컴포넌트에 함수를 prop으로 전달해야 할 때 사용합니다. 이렇게 하면 자식이 불필요하게 재렌더링되지 않으며, 전달된 함수 prop이 동일한 레퍼런스를 유지합니다.