Memoization

React 메모이제이션 선택

무조건 감싸기보다 props 변화, 계산 비용, 함수 참조 전달 여부를 보고 필요한 곳에만 적용합니다.

컴포넌트 경계

React.memo 렌더 생략 조건

부모가 자주 렌더링되고 자식 출력이 props에만 의존할 때 비교 비용을 감수할 가치가 있습니다.

계산 캐시

useMemo 파생 데이터 재사용

정렬, 필터링, 집계처럼 비용이 큰 결과를 의존성 기준으로 재사용해 렌더마다 다시 계산하지 않습니다.

함수 참조

useCallback 전달 안정화

자식 컴포넌트에 넘기는 핸들러 참조를 고정해 memo된 자식이 불필요하게 다시 렌더링되지 않게 합니다.

의존성 변경 조건

의존성 배열 정확도

누락되면 오래된 값을 보고 과하면 매번 다시 계산하므로 값의 출처와 변경 시점을 맞춥니다.

리렌더링 원인

참조 변화와 계산 비용을 구분합니다

객체나 함수가 매번 새로 만들어지는지, 계산 자체가 무거운지에 따라 선택하는 도구가 달라집니다.

최적화 연결

useMemo계산 결과가 화면 입력에서 어떻게 파생되는지 적어야 잘못된 캐시를 피할 수 있습니다.
useCallback함수 내부에서 읽는 state와 props가 바뀌면 참조도 함께 갱신되도록 둡니다.
의존성 배열누락은 stale value를, 과잉 포함은 캐시 무효화를 만들기 때문에 값 출처를 맞춥니다.