[react] JSX에서 useCallback 훅 사용하기

26 Dec 2023

react

React에서 useCallback 훅은 성능 최적화와 불필요한 렌더링을 방지하기 위해 사용됩니다. JSX에서 useCallback 훅을 사용하여 이와 같은 이점을 얻을 수 있습니다. 이번 포스트에서는 JSX에서 useCallback 훅을 어떻게 사용하는지에 대해 알아보겠습니다.

1. useCallback 훅이란?

useCallback 훅은 인라인 콜백을 생성하고 불필요한 재생성을 방지하여 성능을 개선하는 데 사용됩니다. 이는 특히 자식 컴포넌트에 콜백 함수를 props로 전달할 때 유용합니다.

2. JSX에서 useCallback 사용하기

다음은 JSX에서 useCallback 훅을 사용하는 예제입니다:

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

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

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

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

위 예제에서, handleClick 함수는 useCallback을 사용하여 생성되었습니다. 또한, useCallback의 두 번째 매개변수로써 의존성 배열을 전달하여 불필요한 렌더링을 방지합니다.

3. useCallback 사용 시 고려 사항

useCallback 훅은 콜백 함수를 메모이제이션하여 불필요한 렌더링을 방지합니다.
useCallback의 의존성 배열에 필요한 값들을 명시적으로 포함시켜야 합니다.
useCallback을 남용하지 않도록 주의해야 합니다.

useCallback 훅을 사용하여 JSX에서 콜백 함수를 최적화하면 성능을 개선하고 불필요한 렌더링을 방지할 수 있습니다.

더 많은 정보를 원하시면 React 공식 문서를 참고하시기 바랍니다.

참고 문헌:

React 공식 문서: React 공식 문서