August 19, 2025

🧱 렌더링 콜백 지옥: 불필요한 리렌더링과 예측 불가능한 부작용, 💥 성능 병목

React

JavaScript

성능

컴포넌트

렌더링전략

상태관리

비동기처리

Summary

컴포넌트 렌더링 시 과도한 콜백 함수 생성 및 전달은 불필요한 리렌더링과 side effect를 유발하여 성능 저하의 원인이 됩니다. useCallback, 컴포넌트 분리, 상태 관리 라이브러리 활용, 함수형 업데이트 등을 통해 해결할 수 있습니다.

Why Wrong?

React 컴포넌트 내에서 render 함수 또는 함수형 컴포넌트 내부에서 과도하게 콜백 함수를 생성하고 props로 전달하는 것은 심각한 성능 문제를 야기할 수 있습니다. 매 렌더링마다 새로운 함수가 생성되므로, React의 memo, useMemo, useCallback 등의 최적화 기법이 무력화됩니다. 이는 하위 컴포넌트가 props 변화를 감지하고 불필요하게 리렌더링되도록 만들며, 더 나아가 콜백 내에서 side effect가 발생할 경우 예측 불가능한 동작을 초래할 수 있습니다. 특히 복잡한 UI 구조에서는 이러한 패턴이 전체 애플리케이션의 성능을 저하시키는 주범이 됩니다.

How to Fix?

useCallback 훅 활용: 콜백 함수가 의존하는 값(dependencies)이 변경되지 않는 한, 동일한 함수 인스턴스를 재사용하도록 useCallback 훅을 사용합니다. 이렇게 하면 하위 컴포넌트가 불필요하게 리렌더링되는 것을 방지할 수 있습니다.
컴포넌트 분리 및 Props 최적화: 렌더링 콜백을 사용하는 컴포넌트를 분리하고, 필요한 props만 전달합니다. React.memo를 사용하여 props가 변경되지 않은 경우 리렌더링을 막을 수 있습니다.
상태 관리 라이브러리 활용: 전역 상태 관리 라이브러리(Redux, Zustand 등)를 사용하여 컴포넌트 간의 상태 공유 및 업데이트를 효율적으로 관리합니다. 콜백 함수를 통해 상태를 업데이트하는 대신, 액션을 디스패치하여 상태를 변경하고, 컴포넌트는 상태 변화에 따라 자동으로 업데이트되도록 합니다.
함수형 업데이트: 상태 업데이트 시 함수형 업데이트 방식을 사용하여 이전 상태에 안전하게 접근하고 업데이트합니다. 이렇게 하면 클로저로 인한 문제를 예방하고, 최적화된 상태 업데이트를 수행할 수 있습니다.

Before Code (Bad)

import React, { useState } from 'react';

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

  // 렌더링 시마다 새로운 함수가 생성됨
  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      <ChildComponent onClick={handleClick} />
    </div>
  );
};

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered'); // 불필요하게 자주 렌더링됨
  return <button onClick={onClick}>Increment in Child</button>;
});

export default MyComponent;

After Code (Good)

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

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

  // useCallback을 사용하여 함수 인스턴스 재사용
  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // 의존성 배열이 비어있으므로, 컴포넌트가 마운트될 때 한 번만 생성됨

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      <ChildComponent onClick={handleClick} />
    </div>
  );
};

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered'); // count가 변경되어도 리렌더링되지 않음
  return <button onClick={onClick}>Increment in Child</button>;
});

export default MyComponent;

`useCallback` 훅은 함수 인스턴스를 메모이제이션하여 불필요한 리렌더링을 방지하는 데 중요한 역할을 합니다. React 공식 문서에서 `useCallback`의 사용법과 주의사항을 자세히 설명합니다.

https://react.dev/reference/react/useCallback

`React.memo`는 컴포넌트의 props 변화를 shallow 비교하여 리렌더링을 최적화하는 데 사용됩니다. React 공식 문서에서 `React.memo`의 사용법과 성능 최적화 효과를 확인할 수 있습니다.

https://react.dev/reference/react/memo