useCallback : 리액트 훅 사용법

 

useCallback는 함수가 불필요하게 재생성되지 않도록 하고, 특정 값이 변경될 때만 새로운 함수로 교체되게 한다.

 

기본문법

const memoizedCallback = useCallback(() => {
  // 함수 내용
}, [dependency1, dependency2, ...]);

 

useCallback()은 두 가지 인자를 받는다.

1. 첫 번째 인자: 메모이제이션하려는 함수.

2. 두 번째 인자 : 함수가 재생성되어야 할 의존성 배열. 이 배열 안의 값들이 변경될 때만 함수가 새로 생성된다.

 

useCallback을 사용하는 이유

1. 불필요한 함수 재생성 방지 :

React 컴포넌트는 상태(state)나 props가 변경될 때마다 재렌더링된다. 이때, 컴포넌트 내에서 정의된 함수들은 매번 새로 정의되기 때문에, 필요하지 않은 경우에도 불필요하게 함수가 재생성된다. useCallback은 이런 문제를 해결해준다.

 

예시

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

function Counter() {
  const [count, setCount] = useState(0);

  // useCallback을 사용하여 함수 메모이제이션
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // 의존성 배열이 비어 있으므로, increment 함수는 한 번만 생성됨

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

 

위 코드에서, increment함수는 useCallback을 사용해서 한 번만 정의된다.

count가 변경되더라도 increment 함수는 다시 생성되지 않는다.

 

2. 자식 컴포넌트에 전달할 때 유용

자식 컴포넌트에 함수를 props로 전달할 때, useCallback을 사용하면 불필요한 렌더링을 방지할 수 있다.

함수가 새로 생성되지 않기 때문에, 자식 컴포넌트가 불필요하게 다시 렌더링 되는 것을 방지할 수 있다.

 

예시

1. useCallback 없이 함수 전달

function Parent() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);

  return (
    <div>
      <p>{count}</p>
      <Child increment={increment} />
    </div>
  );
}

function Child({ increment }) {
  console.log("Child rendered");
  return <button onClick={increment}>Increment</button>;
}

위 코드에서는 Parent 컴포넌트가 렌더링될 때마다 increment 함수가 새로 생성된다.

이로 인해 Child 컴포넌트는 불필요하게 다시 렌더링된다.

 

2. useCallback으로 최적화한 경우

function Parent() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => setCount(count + 1), [count]);

  return (
    <div>
      <p>{count}</p>
      <Child increment={increment} />
    </div>
  );
}

function Child({ increment }) {
  console.log("Child rendered");
  return <button onClick={increment}>Increment</button>;
}

위 예시에서, useCallback을 사용해서 increment함수가 count값이 변경될 때만 새로 생성되도록 했다.

이제 increment함수는 불필요하게 재생성되지 않으므로, Child 컴포넌트가 불필요하게 다시 렌더링되지 않게 된다.

 

정리

• useCallback은 불필요한 함수 재생성을 방지하고, 특히 자식 컴포넌트에 함수(props)를 전달할 때 유용하다.
• 성능 최적화가 필요할 때 사용하며, 의존성 배열에 들어가는 값이 변경될 때만 함수가 새로 정의된다.