메모이제이션 판단 기준

메모이제이션 적용 경계

React.memo, useMemo, useCallback은 비교 비용과 메모리 비용을 갖습니다. 먼저 리렌더링 원인을 확인하고 필요한 도구만 좁게 씁니다.

1

프로파일링

느린 업데이트와 자주 렌더링되는 컴포넌트를 먼저 기록합니다.

Profiler
2

경계 선택

자식이 순수하고 props가 안정적이면 React.memo 후보입니다.

React.memo
3

값 고정

정렬, 필터링, 객체 생성 비용이 클 때 useMemo를 적용합니다.

useMemo
4

함수 고정

메모된 자식에게 넘기는 콜백 참조가 매번 바뀌면 useCallback을 씁니다.

useCallback
5

의존성 검증

deps 누락으로 오래된 값을 쓰지 않는지 테스트와 린트로 확인합니다.

deps
Server Component

서버 컴포넌트에는 렌더링 훅 최적화가 필요하지 않습니다

메모이제이션은 클라이언트 컴포넌트의 상호작용 비용을 줄이는 도구입니다. 서버에서 끝낼 수 있는 작업은 클라이언트로 보내지 않는 편이 더 큽니다.

"use client" 내부
증상
도구
전제 조건
다시 확인
자식 반복 렌더
React.memo
props 얕은 비교 가능
렌더 횟수 감소
계산 비용 큼
useMemo
deps 정확함
계산 횟수 감소
콜백 참조 변경
useCallback
메모된 자식에 전달
stale closure 없음