🛠️ Cannot update a component while rendering 완벽 해결법 – 원인부터 예방까지

Cannot update a component while rendering 에러란?

React 개발 중 Cannot update a component while rendering 에러를 만나면 당황스러울 수 있습니다. 이 에러는 React 16.13 버전부터 더 엄격하게 경고되기 시작했으며, 컴포넌트 렌더링 중에 다른 컴포넌트의 상태를 변경하려고 할 때 발생합니다. 이는 React의 단방향 데이터 흐름 원칙을 위반하는 것으로, 무한 루프나 예측 불가능한 동작을 야기할 수 있어 반드시 해결해야 합니다. 이 글에서는 에러의 원인부터 해결법, 예방법까지 상세히 알아보겠습니다.

에러 상세 분석

이 에러의 전체 메시지는 다음과 같습니다:

Warning: Cannot update a component (`ComponentName`) while rendering a different component (`AnotherComponent`). To locate the bad setState() call inside `AnotherComponent`, follow the stack trace as described...

React는 렌더링 과정을 순수 함수처럼 취급합니다. 즉, 같은 입력(props, state)에 대해 항상 같은 출력(UI)을 반환해야 합니다. 렌더링 중에 상태를 변경하면 이 원칙이 깨지며, 다음과 같은 문제가 발생합니다:

• 무한 렌더링 루프
• 성능 저하
• 예측 불가능한 UI 상태
• 메모리 누수 가능성

React는 이러한 부작용을 방지하기 위해 렌더링 단계와 커밋 단계를 엄격히 분리하고, 렌더링 중 상태 변경을 금지합니다.

발생 원인 5가지

1. 렌더링 중 직접 setState 호출

컴포넌트 본문에서 직접 상태 업데이트 함수를 호출하는 경우입니다.

function BadComponent() {
  const [count, setCount] = useState(0);
  setCount(1); // ❌ 렌더링 중 직접 호출
  return 
{count}
;
}

2. 자식 컴포넌트에서 부모 상태 변경

자식 컴포넌트의 렌더링 중에 props로 받은 상태 변경 함수를 호출하는 경우입니다.

function Child({ setParentState }) {
  setParentState('new value'); // ❌ 렌더링 중 부모 상태 변경
  return 
Child
;
}

3. useEffect 없이 사이드 이펙트 실행

API 호출이나 구독 등의 사이드 이펙트를 렌더링 본문에서 직접 실행하는 경우입니다.

4. 조건부 렌더링 내 상태 변경

조건문 안에서 상태를 변경하면서 동시에 렌더링하는 경우입니다.

function Component({ data }) {
  const [error, setError] = useState(null);
  if (!data) {
    setError('No data'); // ❌ 조건부 렌더링 중 상태 변경
  }
  return 
{error}
;
}

5. 이벤트 핸들러 즉시 실행

이벤트 핸들러를 콜백으로 전달하지 않고 즉시 실행하는 경우입니다.

Click // ❌ 즉시 실행

해결방법 7가지

1. useEffect 훅 사용

사이드 이펙트는 useEffect 안에서 처리합니다.

function FixedComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setCount(1); // ✅ useEffect 안에서 안전하게 호출
  }, []);
  
  return 
{count}
;
}

2. 이벤트 핸들러 콜백으로 전달

 setCount(count + 1)}>Click // ✅ 콜백으로 전달

3. 파생 상태 대신 계산된 값 사용

function Component({ items }) {
  // ❌ const [count, setCount] = useState(items.length);
  const count = items.length; // ✅ 직접 계산
  return 
{count}
;
}

4. useMemo로 메모이제이션

function Component({ data }) {
  const processedData = useMemo(() => {
    return expensiveOperation(data);
  }, [data]);
  
  return 
{processedData}
;
}

5. useLayoutEffect 사용 (DOM 측정 시)

function Component() {
  const [height, setHeight] = useState(0);
  const ref = useRef(null);
  
  useLayoutEffect(() => {
    setHeight(ref.current.offsetHeight); // ✅ DOM 측정 후 상태 업데이트
  }, []);
  
  return 
Content
;
}

6. 조건부 로직을 useEffect로 이동

function Component({ data }) {
  const [error, setError] = useState(null);
  
  useEffect(() => {
    if (!data) {
      setError('No data'); // ✅ useEffect 안에서 조건 확인
    }
  }, [data]);
  
  return 
{error}
;
}

7. 상태 초기화 함수 활용

function Component({ initialValue }) {
  const [state, setState] = useState(() => {
    return expensiveComputation(initialValue); // ✅ 초기화 시에만 실행
  });
  
  return 
{state}
;
}

예방법과 베스트 프랙티스

Cannot update a component while rendering 에러를 예방하려면 다음 원칙을 따르세요:

• 렌더링은 순수하게: 컴포넌트 본문에서는 JSX 반환에만 집중하고, 상태 변경이나 사이드 이펙트는 피하세요.
• useEffect 활용: 모든 사이드 이펙트는 useEffect, useLayoutEffect에서 처리합니다.
• 파생 상태 최소화: 기존 상태나 props로부터 계산 가능한 값은 별도 상태로 저장하지 마세요.
• 이벤트 핸들러 올바르게 사용: 항상 함수 참조나 화살표 함수로 전달하세요.
• ESLint 플러그인: eslint-plugin-react-hooks를 사용해 잠재적 문제를 사전에 감지하세요.

React DevTools의 Profiler를 활용하면 불필요한 렌더링을 찾아 최적화할 수 있습니다.

마무리

React의 Cannot update a component while rendering 에러는 렌더링 원칙을 이해하면 쉽게 해결할 수 있습니다. 핵심은 렌더링 단계를 순수하게 유지하고, 모든 사이드 이펙트를 적절한 라이프사이클 메서드나 훅에서 처리하는 것입니다. 위에서 소개한 7가지 해결법과 베스트 프랙티스를 적용하면, 더 안정적이고 예측 가능한 React 애플리케이션을 만들 수 있습니다. 에러 메시지의 스택 트레이스를 주의 깊게 읽고, 문제가 되는 컴포넌트를 정확히 파악하는 것도 중요합니다.