2관문. React.memo with Comparator

관문 2 / 7

기본 얕은 비교로 막지 못하는 불필요한 리렌더를 커스텀 비교 함수로 방어하라.

📖 이론 비급

Custom Comparator: 정교한 렌더링 제어

React.memo(Component, arePropsEqual)의 두 번째 인자는 커스텀 비교 함수다. arePropsEqual(prevProps, nextProps)가 true를 반환하면 리렌더를 건너뛴다.

주의사항:

비교 함수 자체의 비용이 리렌더 비용보다 작아야 의미 있다
비교 함수가 잘못되면 오래된 props로 렌더되는 버그가 생긴다
React DevTools Profiler로 실제 효과를 측정하고 적용하라

⚔️ 수련 코드

import { useState, memo } from 'react';

// 문제: data 배열의 내용이 같아도 참조가 달라 매번 리렌더
const DataList = memo(function DataList({ data, label }) {
  console.log('DataList 렌더:', label);
  return <ul>{data.map((d, i) => <li key={i}>{d}</li>)}</ul>;
}/*, (prevProps, nextProps) => {
  // TODO: data 배열의 내용을 비교하는 커스텀 비교 함수를 작성하라
  // 같으면 true(리렌더 건너뜀), 다르면 false
}*/);

export default function App() {
  const [count, setCount] = useState(0);
  // 매 렌더마다 새 배열 참조 생성
  const items = ['사과', '바나나', '포도'];

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>카운트: {count}</button>
      <DataList data={items} label="과일" />
    </div>
  );
}

Open Sandbox