React.memo 렌더 결정 흐름

memo decision

React.memo는 부모 렌더 뒤 props 얕은 비교로 자식 호출을 결정한다

값이 같거나 참조가 같으면 건너뛸 수 있다. 하지만 매 렌더마다 새 객체나 새 함수가 넘어오면 내용이 같아도 다시 렌더링된다.

비교

prevProps와 nextProps를 얕게 비교한다.

통과

모든 props가 같다고 판단되면 자식 렌더를 건너뛴다.

실패

객체, 배열, 함수 참조가 새로 생기면 다른 props로 본다.

부모 렌더

상태 변화로 부모 함수가 다시 실행되고 자식 props가 새로 만들어진다.

얕은 비교

React.memo는 props의 각 항목이 이전과 같은지 빠르게 확인한다.

건너뜀

값과 참조가 모두 안정적이면 memo 자식 호출을 생략한다.

다시 렌더

새 객체나 새 함수가 있으면 props가 달라진 것으로 보고 다시 렌더링한다.

props 종류

안정적인 예

불안정한 예

대응

원시값

5, true, "title"

값이 실제로 바뀔 때만 다르다.

대부분 별도 안정화가 필요 없다.

객체

이전과 같은 참조

렌더마다 새 객체 literal

필요하면 useMemo로 파생 객체를 유지한다.

배열

의존성이 같을 때 같은 배열

filter와 map 결과를 매번 새로 전달

비싼 파생 배열은 useMemo로 묶는다.

함수

의존성이 같을 때 같은 handler

부모 렌더마다 새 익명 함수

useCallback으로 함수 참조를 안정화한다.

함수 props

memo 자식에게 넘기는 이벤트 핸들러는 의존성을 확인하고 useCallback을 검토한다.

객체·배열 props

렌더 중 새로 만드는 파생 데이터는 필요한 범위에서만 useMemo로 유지한다.

구조 조정

상태를 더 낮은 위치로 옮기면 memo보다 단순하게 렌더 범위를 줄일 수 있다.