🧠 useCallback으로 불필요한 렌더링 제거하기

불필요한 재렌더링을 방지하는 건 React 성능 최적화의 주요 과제 중 하나입니다. 부모 컴포넌트가 업데이트될 때, 자식 컴포넌트가 의도치 않게 다시 렌더링되는 문제는 프론트엔드 개발에서의 주된 불청객이죠. 가령, 이벤트 핸들러와 같이 렌더링마다 새로 생성되는 함수가 자식 컴포넌트에 전달되면, React는 해당 참조가 변경되었다고 판단해 불필요한 작업을 반복하게 됩니다👷🏻‍♂️ ⛏️

이러한 문제를 해결하기 위해 등장한 도구가 바로 useCallback입니다. useCallback은 특정 함수의 참조를 고정하여, 변경이 필요한 경우에만 새로운 함수를 생성하도록 제한합니다. 이를 통해 컴포넌트 간 props 전달 과정에서 불필요한 렌더링을 방지하고, 성능 최적화를 달성할 수 있도록 도와줍니다.

하지만 useCallback은 메모리를 사용하는 대가가 있기 때문에, 남용하지 않고 적재적소에 활용하는 것이 중요합니다. 적절하지 않은 상황에서 사용할 경우엔 오히려 메모리 부담을 증가시키는 부메랑이 되어 돌아올 수 있습니다 🪃💥

이번 포스트에서는 useCallback의 원리와 메모이제이션을 통해 React 애플리케이션을 더욱 효율적으로 관리하는 방법을 살펴보고자 합니다.

메모이제이션과 useCallback

React에서 useCallback은 메모이제이션(Memoization)을 통해 함수 참조를 고정하여 불필요한 재렌더링을 방지합니다. 메모이제이션은 동일한 입력에 대해 이전 결과를 저장하고, 동일한 입력이 다시 제공될 경우 저장된 결과를 재활용하는 최적화 기법입니다. 예를 들어, 복잡한 계산이 포함된 함수가 반복적으로 동일한 결과를 반환해야 하는 경우, 메모이제이션은 불필요한 연산을 줄임으로써 처리 시간을 단축합니다.

React에서 메모이제이션은 특히 컴포넌트 렌더링과 관련된 함수 참조를 효율적으로 관리하는 데 유용합니다. 일반적으로 React는 컴포넌트가 렌더링될 때마다 새로운 함수 객체를 생성합니다. 이 과정에서 새로운 입력이 없더라도 동일한 함수가 반복적으로 생성되면 리소스 낭비로 이어질 수 있는데요, 이러한 문제를 해결하는 역할을 하는 것이 바로 useCallback입니다.

useCallback은 어떻게 동작할까?

useCallback은 함수 참조를 메모이제이션하여, 의존성 배열에 포함된 값이 변경되지 않는 한 동일한 참조를 유지합니다. 이를 통해 React는 부모 컴포넌트가 다시 렌더링되더라도 자식 컴포넌트로 전달된 함수의 참조가 변경되지 않았음을 감지하여 불필요한 재렌더링을 방지합니다.

const handleClick = useCallback(() => {
  console.log("클릭 !");
}, []); // 의존성 배열이 비어 있어 함수 참조가 고정됨

위 코드에서 handleClick 함수는 useCallback을 통해 메모이제이션되므로, 의존성 배열이 변경되지 않는 한 동일한 참조를 유지합니다. 이 함수가 자식 컴포넌트에 전달되면, 부모 컴포넌트의 렌더링 여부와 관계없이 자식은 기존 참조를 유지하여 렌더링이 불필요하게 발생하는 것을 피할 수 있습니다.

useCallback의 메모이제이션이 중요한 이유

React는 컴포넌트의 렌더링 성능을 최적화하기 위해 props와 상태 변경 여부를 얕은 비교(=== 연산자)로 판단합니다. 이 비교는 함수의 로직 자체가 아닌 함수가 저장된 메모리 주소를 기준으로 이루어집니다. 그러나 함수는 컴포넌트가 렌더링될 때마다 새로 생성되므로, 동일한 로직을 가진 함수라도 참조가 달라지게 됩니다. 이러한 참조 변경은 React가 props가 변경되었다고 착각하게 만들어 불필요한 렌더링을 발생시키는 주요 원인이 됩니다.

useCallback은 이러한 문제를 해결하기 위해 부모 컴포넌트가 렌더링될 때도 동일한 함수 참조를 자식에 전달하도록 보장합니다. 특히 부모와 자식 간의 복잡한 props 전달 구조나 이벤트 핸들러가 포함된 상황에서 그 효과가 두드러집니다. 자식 컴포넌트는 전달받은 props가 변경되지 않았을 때 렌더링을 생략하기 때문에, 동일한 함수 참조를 유지하는 것이 성능 최적화의 핵심이 됩니다.

useCallback 사용의 유의점

이렇듯 useCallback은 함수 참조를 고정하여 불필요한 재렌더링을 방지하는 도구입니다. 하지만 메모이제이션은 메모리를 추가로 소비하며, 잘못된 사용은 성능 저하나 코드 복잡성 증가로 이어질 수 있습니다. 이 때문에 일부 개발자들은 사용을 꺼리는 경우가 더러 있죠 🙅🏻 이번 챕터에서는 useCallback이 적절하지 않은 경우와, 사용 시 유의해야 할 점을 다루어보고자 합니다.

단순한 컴포넌트에서의 불필요한 사용

내부적으로만 사용되는 함수에 useCallback을 사용하는 것은 대부분 불필요합니다. 함수가 자식 컴포넌트에 전달되지 않는다면, 렌더링 시마다 새로 생성되더라도 성능에 실질적인 영향을 미치지 않기 때문입니다.

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

  const increment = () => {
    setCount((prev) => prev + 1);
  };

  return <button onClick={increment}>눌러보소</button>;
}

위 코드에서 increment 함수는 컴포넌트 내부에서만 사용되며 자식 컴포넌트로 전달되지 않습니다. 이런 상황에서 useCallback을 사용하면 함수 참조를 메모이제이션하느라 오히려 메모리와 CPU 자원을 낭비하게 됩니다.

렌더링 비용이 낮은 컴포넌트

컴포넌트의 렌더링이 단순하다면, useCallback으로 함수 참조를 고정하더라도 얻는 이점이 거의 없습니다. 예를 들어, 단순히 버튼이나 텍스트 요소를 렌더링하는 컴포넌트는 렌더링 자체의 비용이 매우 낮기 때문에, 부모 컴포넌트의 재렌더링에 따라 다시 렌더링되더라도 사용자 경험에 거의 영향을 미치지 않습니다.

function SimpleButton({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

이 경우, useCallback으로 props를 고정하더라도 렌더링 성능의 차이를 체감하기 어렵습니다. 이렇듯 렌더링 비용이 낮은 컴포넌트는 코드의 단순성을 유지하는 것이 더 나은 선택일 수 있습니다.

의존성 관리의 복잡성

useCallback을 사용할 때 의존성 배열은 함수 참조의 업데이트 조건을 정의합니다. 이 배열이 잘못 설정되면, 상태 변경이 제대로 반영되지 않거나 불필요한 업데이트가 발생할 수 있습니다. 예를 들어, 의존성 배열을 비워두면 상태나 props 변경이 함수에 반영되지 않아 예상치 못한 동작이 발생할 수 있습니다.

const handleClick = useCallback(() => {
  console.log(count); // 이 코드는 최신 상태를 참조하지 않을 수 있음
}, []); // 의존성 배열에 count를 추가하지 않음

위 코드에서는 count가 의존성 배열에 포함되지 않았기 때문에, handleClick 함수는 렌더링 시점의 초기 count 값을 참조합니다. 이는 상태가 변경되더라도 최신 값을 반영하지 않는 오류로 이어질 수 있습니다. 의존성 배열에 필요한 값을 추가하면 문제를 해결할 수 있지만, 추가할 값이 많아지면 배열 관리가 복잡해지고 코드 가독성이 떨어질 수 있습니다. 따라서 useCallback을 사용할 때는 의존성 배열의 설정이 함수의 의도와 일치하는지 항상 신중히 검토해야 합니다.

가벼운 함수 로직

useCallback은 복잡하거나 반복적인 연산을 수행하는 함수에서 효과적이지만, 로직이 단순한 함수에서는 오히려 비용이 더 커질 수 있습니다. 예를 들어, 콘솔 로그를 출력하거나 간단한 값 변경만 수행하는 함수라면 메모이제이션 자체가 비용이 더 클 수 있습니다.

const logMessage = useCallback(() => {
  console.log("방가방가");
}, []);

위 코드에서 logMessage 함수는 단순히 콘솔 로그를 출력하는 역할을 합니다. 이 경우, 메모이제이션을 위해 추가적으로 메모리를 소비하고 의존성을 관리해야 하는 비용이 함수 생성 비용보다 더 클 수 있습니다. 함수 실행 시간이 1ms 이하로 측정되거나, 반복 호출이 성능에 큰 영향을 미치지 않는 상황에서는 useCallback을 사용하지 않는 편이 더 적절합니다.

그렇다면 이러한 상황에서는 어떤 대안이 있을까요?💡

우선, 단순한 함수나 렌더링 비용이 낮은 컴포넌트에서는 useCallback을 완전히 생략하고 React의 기본 렌더링 흐름에 맡기는 것이 가장 효율적입니다. React는 기본적으로 매우 효율적인 렌더링 메커니즘을 제공하며, 단순한 작업에서는 최적화보다 코드 가독성과 유지보수성을 우선시하는 것이 좋습니다.

또한, 의존성 관리가 복잡한 상황에서는 함수 참조를 고정하기보다는 해당 로직을 별도의 훅이나 Context로 분리하여 의존성을 명시적으로 관리하는 것도 좋은 접근법입니다. 예를 들어, React Context를 사용하면 상태와 로직을 전역적으로 공유할 수 있어 props 드릴링 없이도 간결한 코드를 유지할 수 있습니다.

const CounterContext = React.createContext();

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);

  const increment = () => setCount((prev) => prev + 1);

  return (
    <CounterContext.Provider value={{ count, increment }}>
      {children}
    </CounterContext.Provider>
  );
}

function CounterButton() {
  const { increment } = useContext(CounterContext);
  return <button onClick={increment}>클릭 !</button>;
}

위 예제에서 increment는 Context를 통해 관리되므로, 의존성 배열 설정의 부담 없이 참조 일관성을 유지할 수 있습니다.

결론적으로, useCallback은 필요한 경우에만 사용하고, 대안이 더 나은 선택일 수 있는 상황에서는 과감히 생략하거나 다른 최적화 방법을 고려하는 것이 더 나은 결과를 가져올 수 있습니다.

useCallback의 사용 사례

이렇듯 사용에 신중해야하는 useCallback이지만, 적절한 맥락에서 활용한다면 useCallback은 React 애플리케이션의 성능 최적화에 큰 도움을 줄 수 있습니다. 가령 이벤트 핸들러, API 호출, 상태 관리 등 다양한 상황에서 효과적으로 활용될 수 있는데요. 이번 챕터에서는 useCallback을 바탕으로 최적화를 이룰 수 있는 몇 가지 대표적인 사례를 다뤄보겠습니다.

이벤트 핸들러 최적화

useCallback은 자식 컴포넌트가 React.memo로 감싸져 있고, 부모 컴포넌트가 자식에게 이벤트 핸들러를 전달해야 할 때 유용합니다. React.memo는 부모 컴포넌트에서 전달되는 props가 변경되지 않는 한, 자식 컴포넌트의 렌더링을 방지합니다. 하지만 함수는 JavaScript에서 참조형 데이터이므로, 렌더링 시마다 새로운 참조를 가지게 되는데요. 이는 자식 컴포넌트에 불필요한 렌더링을 유발할 수 있습니다.

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

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>눌러보소</button>
      <Child onClick={handleClick} />
    </div>
  );
}

const Child = React.memo(({ onClick }) => {
  return <button onClick={onClick}>눌러봐유</button>;
});

위 코드에서 handleClick 함수는 useCallback을 통해 참조가 고정됩니다. 즉, 부모 컴포넌트가 렌더링될 때 handleClick의 참조가 변경되지 않으므로, React.memo로 감싸진 자식 컴포넌트는 렌더링되지 않습니다. 이를 통해 불필요한 연산을 줄이고 애플리케이션의 성능을 최적화할 수 있습니다.

API 호출 최적화

useCallback은 API 호출을 관리하는 함수에서도 큰 역할을 합니다. API 호출 함수가 새로 생성되면, 해당 함수를 의존성 배열에 포함한 useEffect가 불필요하게 실행될 수 있습니다. 이는 동일한 데이터를 반복적으로 요청하거나, 네트워크 트래픽을 증가시킬 위험을 불러옵니다.

function Fetcher() {
  const fetchData = useCallback(async (endpoint) => {
    const response = await fetch(endpoint);
    const data = await response.json();
    console.log(data);
  }, []);

  useEffect(() => {
    fetchData('/api/data');
  }, [fetchData]);

  return <div>데이터 fetch 중 ...</div>;
}

위 코드에서 fetchData는 useCallback을 통해 참조가 고정됩니다. 이를 통해 useEffect의 의존성 배열이 불필요한 업데이트로 인해 반복 실행되지 않습니다. 특히, API 호출이 빈번하거나 데이터 무결성이 중요한 경우, 이 접근 방식은 불필요한 호출을 방지하고 안정성을 확보할 수 있습니다.

상태 관리와 Reducer 최적화

상태 관리를 위한 useReducer 훅을 사용할 때, dispatch 함수와 함께 복잡한 액션을 처리해야 할 경우 useCallback은 상태 업데이트 로직의 참조를 고정하는 데 유용합니다. 이렇게 하면 상태 업데이트 함수가 자식 컴포넌트로 전달될 때 참조가 변경되지 않아 불필요한 렌더링을 방지할 수 있습니다.

function Counter() {
  const [state, dispatch] = useReducer((state, action) => {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      default:
        return state;
    }
  }, { count: 0 });

  const increment = useCallback(() => {
    dispatch({ type: 'increment' });
  }, [dispatch]);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>눌러봥</button>
    </div>
  );
}

여기서 increment 함수는 useCallback으로 메모이제이션되어 dispatch와 함께 참조가 고정됩니다. 이로 인해, 상태 업데이트를 수행하는 자식 컴포넌트에 increment를 props로 전달하더라도 참조가 변경되지 않으며, 자식 컴포넌트의 불필요한 렌더링을 방지할 수 있습니다.

마무리하며

React 애플리케이션에서 성능 최적화는 단순히 렌더링 속도를 높이는 문제를 넘어, 동작의 일관성을 유지하고 사용자 경험을 향상시키는 데 중요한 역할을 합니다. useCallback은 이러한 최적화에서 핵심적인 도구로, 참조 고정을 통해 불필요한 재렌더링을 방지하고, 복잡한 애플리케이션에서도 안정적으로 동작하는 코드를 작성할 수 있도록 돕습니다.

이러한 useCallback을 사용하는 데에는 분명한 기준과 주의가 필요합니다. 잘못된 사용은 메모리 소비와 코드 복잡성을 증가시킬 수 있기 때문에, 이를 사용할 때는 반드시 의존성 배열과 함수 참조의 영향을 신중히 검토해야 합니다. 또한, 성능 최적화의 효과를 확인하기 위해 실제 데이터를 기반으로 검증하는 과정도 필수적입니다.

하지만 이는 useCallback 자체의 문제가 아니라, 사용자가 이를 어떤 맥락에서 어떻게 적용했느냐에 따라 달라지는 문제입니다. 적절한 사용 조건과 명확한 목적이 있다면, useCallback은 여전히 성능 최적화의 훌륭한 도구가 될 수 있습니다 🛠️

이번 아티클에서는 useCallback의 원리와 유의점, 그리고 효과적인 사용 사례를 살펴보았습니다. 이를 통해 이 도구가 가진 가능성과 한계를 명확히 이해하고, 적재적소에 활용할 수 있기를 바랍니다. useCallback, 이젠 너무 미워하지 마세요 ~! ❤️‍🩹