August 16, 2025

🧟‍♂️ state 끌어올리기(Lifting State Up) 함정: 불필요한 상위 컴포넌트 리렌더링 유발

React

JavaScript

성능

컴포넌트

렌더링전략

상태관리

Summary

State 끌어올리기는 상태 공유를 위한 중요한 패턴이지만, 과도하게 사용하면 불필요한 리렌더링을 유발하고 성능 저하를 초래합니다. 필요한 최소 공통 부모까지만 상태를 끌어올리고, 메모이제이션 기법과 컴포넌트 분리를 통해 리렌더링을 최적화해야 합니다.

Why Wrong?

State 끌어올리기는 React에서 컴포넌트 간 상태 공유를 위한 핵심 패턴이지만, 무분별하게 적용하면 오히려 성능 저하를 초래할 수 있습니다. 특정 상태와 관련 없는 상위 컴포넌트까지 리렌더링을 유발하여 비효율적인 업데이트를 발생시키기 때문입니다. 특히 복잡한 컴포넌트 트리에서 최상위 컴포넌트로 상태를 끌어올리는 경우, 작은 상태 변화에도 앱 전체가 리렌더링될 수 있습니다. 또한 상태를 끌어올린 컴포넌트가 불필요하게 커지고 복잡해져 유지보수성이 떨어질 수 있습니다.

How to Fix?

State 끌어올리기를 적용하기 전에 상태 공유의 필요성을 신중하게 판단해야 합니다. 상태가 필요한 최소 공통 부모(Nearest Common Ancestor) 컴포넌트까지만 상태를 끌어올리고, Context API나 상태 관리 라이브러리를 사용하여 전역 상태 관리가 필요한 경우에만 최상위 컴포넌트로 상태를 이동시키는 것이 좋습니다. React.memo, useMemo, useCallback 훅을 사용하여 불필요한 리렌더링을 방지하고, 컴포넌트 분리를 통해 상태 업데이트 범위를 제한해야 합니다.

Before Code (Bad)

// 최상위 컴포넌트
function App() {
  const [text, setText] = useState('');

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <InputComponent text={text} onChange={handleChange} />
      <DisplayComponent text={text} />
    </div>
  );
}

// 입력 컴포넌트
function InputComponent({ text, onChange }) {
  console.log('InputComponent rendered');
  return (
    <input type="text" value={text} onChange={onChange} />
  );
}

// 출력 컴포넌트
function DisplayComponent({ text }) {
  console.log('DisplayComponent rendered');
  return (
    <p>입력 값: {text}</p>
  );
}

After Code (Good)

// 최상위 컴포넌트
function App() {
  const [text, setText] = useState('');

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

  return (
    <div>
      <InputComponent onChange={handleChange} />
      <DisplayComponent text={text} />
    </div>
  );
}

// 입력 컴포넌트 (메모이제이션 적용)
const InputComponent = React.memo(function InputComponent({ onChange }) {
  console.log('InputComponent rendered');
  return (
    <input type="text" onChange={onChange} />
  );
});

// 출력 컴포넌트
function DisplayComponent({ text }) {
  console.log('DisplayComponent rendered');
  return (
    <p>입력 값: {text}</p>
  );
}

React 공식 문서에서 Lifting State Up 패턴에 대한 설명과 사용법을 자세히 배울 수 있습니다.

https://react.dev/learn/sharing-state-between-components

React.memo를 사용하여 컴포넌트의 props가 변경되지 않았을 경우 리렌더링을 방지하는 방법을 배울 수 있습니다.

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