React의 useCallback 예제

React에서 useCallback은 함수를 메모리에 저장하여 성능을 최적화하는데 유용하다.

 

부모 컴포넌트가 여러 항목을 관리하고, 각 항목을 업데이트하는 기능을 자식 컴포넌트에게 전달하는 상황이다.

useCallback을 사용하면 부모 컴포넌트에서 자식 컴포넌트로 전달되는 함수가 불필요하게 재생성되는 것을 방지할 수 있다.

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

function Item({ item, onUpdate }) {
  return (
    <div>
      <p>{item.content}</p>
      <button onClick={() => onUpdate(item.id, `업데이트된 내용: ${item.content}`)}>업데이트</button>
    </div>
  );
}

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, content: '항목 1' },
    { id: 2, content: '항목 2' },
    // 추가 항목들...
  ]);

  // useCallback을 사용해 아이템 업데이트 함수를 생성한다
  const updateItem = useCallback((itemId, newContent) => {
    setItems(prevItems =>
      prevItems.map(item =>
        item.id === itemId ? { ...item, content: newContent } : item
      )
    );
  }, []);

  return (
    <div>
      {items.map(item => (
        <Item key={item.id} item={item} onUpdate={updateItem} />
      ))}
    </div>
  );
}

export default ItemList;

이 코드에서 ItemList 컴포넌트는 여러 Item 컴포넌트를 렌더링한다.

각 Item 컴포넌트에는 항목을 업데이트하는 버튼이 포함되어 있으며, 이 버튼을 클릭하면 ItemList의 updateItem 함수가 실행된다. useCallback 훅을 사용해 updateItem 함수를 메모리에 저장함으로써, ItemList 컴포넌트가 리렌더링될 때마다 함수가 재생성되는 것을 방지한다.

이는 특히 항목 리스트가 크고 복잡한 경우 성능에 큰 영향을 미칠 수 있다.

이 예제는 useCallback을 사용하는 보다 복잡한 상황을 설명한다.

부모 컴포넌트가 자식 컴포넌트에 콜백 함수를 전달하는 경우, useCallback을 사용하면 함수가 불필요하게 재생성되는 것을 방지하여 큰 규모의 복잡한 애플리케이션에서 성능 최적화에 도움이 된다.