[React] useCallback

useCallback 이란

React의 useCallback 훅은 성능 최적화를 위해 사용되는 훅 중 하나이다.

이 훅은 함수를 캐시(cache)하여 불필요한 함수 재생성을 방지하고, 성능을 최적화하는 데에 도움을 준다.

 

사용법

useCallback은 두 개의 인자를 받는다.

첫 번째 인자는 캐시할 함수이며, 두 번째 인자는 의존성 배열(dependency array)이다.

의존성 배열에는 캐시할 함수에서 참조하는 값들이 포함되며, 이 값들이 변경될 때마다 함수를 다시 생성한다.

 

예시

예를 들어, 다음과 같은 코드가 있다고 가정하자.

import { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>Count: {count}</button>
  );
}

이 코드에서는 handleClick 함수가 매번 새로 생성된다.

하지만 handleClick 함수는 count 값을 참조하는데, count가 변경되지 않는 한 함수를 재생성할 필요가 없다.

 

이런 경우에 'useCallback' 을 사용하여 handleClick 함수를 캐시할 수있다.

import { useState, useCallback } from 'react';

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <button onClick={handleClick}>Count: {count}</button>
  );
}

위 코드에서 useCallback 훅을 사용하여 handleClick 함수를 캐시한다.

이 함수는 count 값이 변경될 때마다 재생성된다.

이를 통해 불필요한 함수 재생성을 방지하고, 성능을 최적화할 수 있다.

 

useCallback 은 useMemo 와 비슷한 기능을 제공하지만, 반환하는 값이 함수인 점이 다르다.

useCallback 은 캐시된 함수를 반환하고

useMemo는 캐시된 값을 반환한다.

 

따라서 useCallback 은 함수 캐싱에 특화되어있다.