1관문. Referential Integrity

관문 1 / 7

매 렌더마다 새 참조가 생성되어 React.memo가 무력화되는 원인을 찾고 useCallback으로 해결하라.

📖 이론 비급

참조 동일성: useMemo/useCallback의 진짜 이유

React.memo는 props의 얕은 비교로 리렌더를 건너뛴다. 하지만 부모가 렌더될 때마다 함수나 객체가 새로 생성되면 참조가 달라져 memo가 소용없어진다.

useCallback: 함수 참조를 메모이제이션한다. 의존성이 같으면 동일 참조를 반환. useMemo: 값/객체 참조를 메모이제이션한다. memo된 자식에게 넘기는 props에 항상 안정적인 참조를 제공하라.

⚔️ 수련 코드

import { useState, useCallback, memo } from 'react';

const Button = memo(function Button({ onClick, children }) {
  console.log('Button 렌더:', children);
  return <button onClick={onClick}>{children}</button>;
});

export default function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // 문제: 매 렌더마다 새 함수가 생성되어 Button의 memo가 무력화된다
  const handleIncrement = () => setCount(c => c + 1);
  // TODO: useCallback으로 감싸라

  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} placeholder="입력 (Button이 리렌더되는지 확인)" />
      <p>{count}</p>
      <Button onClick={handleIncrement}>증가</Button>
    </div>
  );
}

Open Sandbox