React.memo 적용 신호 찾기

memo 적용 대상 판별 기준

props stability, shallow compare, child render cost, custom compare risk 항목을 측정 관점에서 나누고, 화면 상태와 사용자 조작이 어느 컴포넌트에서 바뀌는지 표시합니다.

측정

props 생성 위치와 비교 경계

memo 적용은 감싼 컴포넌트, props 생성 위치, 리스트 아이템 경계를 Profiler 결과와 함께 확인합니다. 참조가 매번 바뀌면 memo 경계가 있어도 렌더를 건너뛰지 못합니다.

렌더 원인

React.memo의 실패 조건

부모가 매번 새 객체와 함수를 넘기면 memo가 아무 효과를 내지 못합니다. 동일 props와 변경 props를 번갈아 실행해 비교 계약을 확인합니다.

최적화 경계

memo 적용 전후 렌더 증거

마지막에는 Profiler 비교, props identity 확인, memo 제거/적용 전후 비용을 남겨 렌더 skip이 실제 비용 절감으로 이어졌는지 다시 확인합니다.

close

비교 계약

React.memo는 props가 같을 때 함수 컴포넌트 실행을 건너뛰는 비교 계약입니다 하위 컴포넌트 렌더 비용이 크고 props 참조가 안정적일 때만 효과가 있으므로 적용 전에 render count를 먼저 확인합니다.

shallow compare

props 안정성

얕은 비교는 객체 내부가 아니라 참조가 같은지 비교합니다 부모가 매 렌더마다 새 배열, 새 객체, 새 콜백을 만들면 props 값이 의미상 같아도 memo는 렌더를 막지 못합니다.

identity

렌더 스킵

사용 예시는 부모 state 변경, 동일 props, 변경 props를 따로 실행합니다 동일 props에서는 렌더가 건너뛰고, 실제 변경 props에서는 화면이 즉시 갱신되며, custom compare가 오래된 UI를 만들지 않는지 확인합니다.

render skip

React.memo 검증 지점

렌더 건너뛰기 부모가 다시 렌더되어도 동일 props를 받은 memo 컴포넌트의 render count가 늘지 않고 화면 결과가 유지되는지 확인합니다.

참조 흔들림 inline 객체, inline 함수, 매번 재생성되는 배열이 props로 내려가면 memo가 무력해지므로 부모의 값 생성 위치를 함께 조정합니다.

Profiler 비교 memo 적용 전후의 commit duration, self time, props diff를 남겨 비교 비용보다 렌더 절감이 큰지 확인합니다.

성능 디버깅 점검

질문: React.memo가 비교해야 하는 props는 안정적인 참조를 유지하는가
순서: props 비교로 건너뛸 렌더 찾기 -> 얕은 비교와 props identity 맞추기 -> 동일 props와 변경 props 시나리오 검증하기
위험: 부모가 매번 새 객체를 넘기면 memo 컴포넌트도 계속 실행되고 최적화 효과를 확인할 수 없습니다.