useCallback

useCallback은 리액트에서 제공하는 훅으로, 함수의 메모이제이션을 위해 사용된다. ⚡ 컴포넌트가 렌더링될 때마다 동일한 함수를 다시 생성하는 것을 방지하고, 불필요한 렌더링을 줄여 성능을 최적화하는 데 유용하다. 특히 하위 컴포넌트에 콜백 함수로 함수를 전달할 때 유용하다.

useCallback의 기본 사용법 🔧

useCallback은 다음과 같은 형태로 사용한다:

const memoizedCallback = useCallback(() => {
  함수 내용
}, [의존성 배열]);

첫 번째 인자로 메모이제이션할 함수를 받고, 두 번째 인자로 의존성 배열을 받는다. 의존성 배열의 값들이 변경될 때만 함수가 새롭게 생성되며, 그렇지 않으면 이전에 생성한 함수를 재사용한다. 🌀

언제 사용해야 할까? 🤔

useCallback은 다음과 같은 상황에서 사용하면 좋다:

콜백 함수가 하위 컴포넌트로 전달되는 경우: 하위 컴포넌트가 전달된 함수의 변경을 감지해 불필요하게 다시 렌더링되지 않도록 막을 수 있다.

함수가 종속된 값이 변경되지 않을 때: 동일한 함수를 반복해서 생성하는 것을 방지하고, 리렌더링 성능을 최적화할 수 있다.

하지만 모든 함수에 useCallback을 적용하는 것은 오히려 코드의 복잡성을 높이고 성능을 저하시킬 수 있다. 따라서 성능에 중요한 영향을 줄 수 있는 상황에만 사용하는 것이 좋다. 🚫

예시 코드 📄

아래는 useCallback을 사용해 버튼 클릭 시 호출되는 핸들러 함수를 메모이제이션하는 예시이다:

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

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

  // useCallback을 사용해 핸들러를 메모이제이션
  const handleClick = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={handleClick}>증가</button>
    </div>
  );
};

export default Counter;

위 코드에서는 handleClick 함수가 useCallback을 통해 메모이제이션되어, 컴포넌트가 다시 렌더링될 때도 동일한 함수를 재사용하게 된다. ⏳ 이렇게 함으로써 불필요한 함수 재생성을 방지하고 성능을 개선할 수 있다.

정리 📌

useCallback은 함수의 메모이제이션을 위해 사용된다.

하위 컴포넌트에 콜백 함수로 전달할 때 성능 최적화에 유용하다.

성능 최적화가 필요한 경우에만 사용하고, 너무 남용하지 않는 것이 좋다. 😊

useCallback을 적절히 사용하면 불필요한 함수 생성과 렌더링을 줄이고, 컴포넌트의 성능을 최적화할 수 있다!