MEMOIZATION TOOLS

무엇을 안정화할지 정하면 memo 도구 선택이 쉬워진다

React.memo는 컴포넌트 렌더를 건너뛰고, useCallback은 함수 참조를, useMemo는 계산 결과나 객체 참조를 안정화합니다.

React.memo

props가 이전과 같으면 컴포넌트 함수를 다시 실행하지 않도록 합니다.

대상자식 컴포넌트

전제props 참조가 안정적

주의얕은 비교 비용

렌더마다 새 함수가 만들어져 memo 자식을 깨우는 상황을 줄입니다.

대상이벤트 핸들러

전제자식이 memo 처리됨

주의의존성 배열 정확도

비싼 계산 결과나 객체, 배열 참조를 의존성이 바뀔 때만 갱신합니다.

대상계산값, 배열, 객체

전제계산 비용 또는 참조 문제

주의불필요한 캐싱 금지

Profiler로 실제로 느린 렌더인지 먼저 확인합니다.

상태 위치와 컴포넌트 경계를 조정할 수 있는지 봅니다.

메모화 후 렌더 횟수와 체감 응답성을 다시 비교합니다.

상황

무거운 자식

함수 props

계산 결과