React Hook : useCallback()

React에서 useCallback()은 컴포넌트에서 성능을 최적화하기 위해 사용되는 Hook 중 하나입니다. 이 Hook은 메모이제이션된 함수를 반환하며, 이 함수는 컴포넌트가 렌더링될 때마다 새로 생성되지 않고 이전에 생성된 함수를 재사용합니다. 이를 통해 불필요한 함수 생성 및 연산을 방지하여 성능을 향상시킵니다.

useCallback()은 다음과 같은 구문으로 사용할 수 있습니다.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallback()은 두 개의 인자를 받습니다. 첫 번째 인자는 메모이제이션된 함수이며, 두 번째 인자는 의존성 배열(dependency array)입니다. 두 번째 인자를 전달하지 않으면 useCallback()은 컴포넌트가 처음 마운트될 때 메모이제이션된 함수를 생성합니다. 의존성 배열에는 메모이제이션된 함수가 의존하는 값들을 나열합니다. 만약 의존성 배열에 있는 값이 변경되면, useCallback()은 새로운 메모이제이션된 함수를 생성합니다. 이 때, 새로 생성된 함수는 이전에 생성된 함수와 다를 수 있습니다.

다음은 useCallback()을 사용하여 의존성 변경을 추적하는 예제입니다.

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

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

  const handleChange = useCallback((event) => {
    setText(event.target.value);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <input type="text" value={text} onChange={handleChange} />
    </div>
  );
}

export default App;

위 예제에서 handleChange 함수는 input 요소의 값이 변경될 때마다 호출됩니다. handleChange 함수는 setText 함수에 의존합니다. 그러나 setText 함수는 의존성 배열에 포함되어 있지 않습니다. 이 경우, 의존성 배열이 빈 배열([])로 설정되었으므로, useCallback()이 처음에 생성된 함수를 메모이제이션합니다. 그리고 이 함수는 항상 이전에 생성된 함수와 동일합니다.

하지만, setText 함수가 변경될 때마다 새로운 함수를 생성하려면, 의존성 배열에 setText 함수를 추가해야 합니다. 의존성 배열을 [setText]로 설정하면, setText 함수가 변경될 때마다 새로운 함수가 생성됩니다.

이제 의존성 배열을 [setText]로 설정하여 예제를 다시 실행해보면, input 요소의 값이 변경될 때마다 새로운 함수가 생성되는 것을 확인할 수 있습니다. 이전에는 새로운 함수가 생성되지 않았기 때문에, 불필요한 함수 호출이 발생할 수 있었습니다. 하지만 이제 useCallback()을 사용하여, setText 함수가 변경될 때마다 새로운 함수를 생성하므로, 불필요한 함수 호출을 방지하여 성능을 향상시킬 수 있습니다.

내저장소 바로가기 luxury515