[React] 리액트 useCallback란?

React에서 useCallback은 성능 최적화를 위한 훅입니다. 특히 컴포넌트가 재렌더링될 때 불필요하게 함수를 다시 생성하는 문제를 해결해 줍니다. 컴포넌트가 리렌더링 될 때마다 함수는 새로 생성되지만, useCallback은 이전에 생성된 함수를 메모이제이션하여 동일한 의존성 배열을 가지면 재사용합니다.

 

react useCallback - 커버 이미지

 

목차

1. useCallback 사용법

2. useCallback 사용 예시

3. 의존성 관리의 중요성

마무리

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

1. useCallback 사용법

React 컴포넌트가 리렌더링 될 때마다 모든 함수는 기본적으로 새로 생성됩니다. 이는 불필요한 자원 낭비를 초래할 수 있습니다. useCallback은 함수와 의존성 배열을 인자로 받아, 의존성 배열에 변화가 없으면 기존에 생성된 함수를 그대로 재사용합니다.

const memoizedCallback = useCallback(() => {
  // 실행할 코드
}, [dependency1, dependency2, ...]);

 

dependency1, dependency2는 함수의 의존성입니다. 이 값들이 변하지 않으면 useCallback은 이전에 생성된 함수를 재사용합니다.

2. useCallback 사용예시

 

• 컴포넌트 자식에게 함수 전달 시: 자식 컴포넌트에 콜백 함수를 전달할 때 자식이 불필요하게 리렌더링 되는 것을 방지합니다.
• 복잡한 연산이 포함된 함수: 복잡한 연산이 들어가는 함수가 매번 새로 생성되지 않도록 최적화합니다.

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

  // count 값이 바뀔 때만 새로 생성됨
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <button onClick={handleClick}>증가</button>
  );
};

 

 

handleClick 함수는 count가 변할 때만 새로 생성되며, 그렇지 않은 경우 이전에 생성된 함수를 재사용합니다.

 

3. 의존성 관리의 중요성

useCallback을 사용할 때는 의존성 배열을 올바르게 관리하는 것이 중요합니다. 배열에 잘못된 값이 들어가거나, 의존성을 누락하면 함수가 갱신되지 않아 버그를 유발할 수 있습니다.

 

잘못된 의존성 배열

import { useState, useCallback } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, []); // count 의존성 누락
  return (
    <>
      <div>{count}</div> // 1에서 증가 x
      <button onClick={handleClick}>증가</button>
    </>
  );
}

export default App;

 

코드에서 의존성 배열이 빈 배열이므로 count 값이 변경되어도 handleClick 함수는 항상 초기 count 값을 사용합니다. 즉, 버튼을 클릭해도 count는 1 이후로는 증가하지 않습니다.

 

올바른 의존성 배열

import { useState, useCallback } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // count의 변화에 의지해 새로 생성(재사용)
  return (
    <>
      <div>{count}</div>
      <button onClick={handleClick}>증가</button>
    </>
  );
}

export default App;

 

위 예시에서 의존성 배열에 count를 사용했습니다. 이 경우 count의 값이 변할 때마다 함수가 재사용되어 증가 기능이 정상적으로 동작합니다.

 

 

 

언제 useCallback을 써야 할까?

• 성능 최적화가 필요한 경우: 리렌더링이 빈번하거나, 콜백 함수가 자식 컴포넌트에 전달되는 경우에 유용합니다.
• 그러나 무조건 사용하는 것은 좋지 않습니다. 성능에 실질적인 영향을 줄 때만 사용하는 것이 좋습니다.

언제 사용하지 말아야 할까?

useCallback 자체도 메모리 자원을 사용하므로, 간단한 함수나 리렌더링 성능에 큰 문제가 없다면 사용하지 않아도 됩니다.

 

 

 

추천글

2024.10.04 - [개발 공부 일지/React] - [React] 제어 컴포넌트와 비제어 컴포넌트

[React] 제어 컴포넌트와 비제어 컴포넌트

2024.10.01 - [개발 공부 일지/React] - [React] 리액트 useEffect란?

[React] 리액트 useEffect란?