React.memo는 props가 변하지 않으면 컴포넌트 리렌더를 건너뛰는 고차 컴포넌트입니다.

🔄 동작

const Row = React.memo(function Row({ item }: { item: Item }) {
  return <li>{item.name}</li>;
});

• 부모 리렌더 시 shallow compare props → 같으면 render skip
• custom compare: (prev, next) => boolean

✅ 효과적인 조건

• 컴포넌트 render 비용이 큼
• props가 자주 같음 (stable reference)
• 부모가 자주 리렌더, 자식은 동일 props

⚠️ 함정

• inline object/function props → 매번 새 참조 → memo 무효
• useCallback, useMemo와 함께 쓸 때만 의미 (과도한 memo는 오히려 비용)
• Context 구독 컴포넌트는 memo해도 context 변경 시 리렌더

🔗 참고 자료

• memo — props가 같으면 리렌더를 건너뛰는 HOC를 설명한다.
• useMemo — 값 메모이제이션으로 안정적인 props를 유지하는 방법을 설명한다.
• useCallback — 함수 참조를 안정화해 memo와 함께 쓰는 방법을 설명한다.
• Keeping Components Pure — 순수 렌더와 최적화의 전제를 설명한다.