Cannot update a component while rendering 완벽 해결법

React 개발 중 ‘Cannot update a component while rendering a different component’라는 에러 메시지를 만난 적이 있나요? 이 에러는 React 16.13.0 버전 이후 엄격하게 검사되기 시작한 문제로, 컴포넌트가 렌더링되는 동안 다른 컴포넌트의 상태를 변경하려고 할 때 발생합니다. Cannot update a component while rendering 에러는 React의 단방향 데이터 흐름 원칙을 위반했을 때 나타나며, 무한 렌더링 루프나 예측 불가능한 동작을 초래할 수 있습니다. 이 글에서는 이 에러의 정확한 원인과 실전에서 바로 적용 가능한 해결 방법을 상세히 알아보겠습니다.

에러 상세 분석

Cannot update a component while rendering 에러는 React의 렌더링 단계에서 발생하는 대표적인 경고입니다. 정확한 에러 메시지는 ‘Warning: Cannot update a component (`ComponentName`) while rendering a different component (`AnotherComponent`)’의 형태로 나타납니다. 이 에러가 발생하는 근본적인 이유는 React의 렌더링 프로세스가 순수 함수여야 한다는 원칙 때문입니다. 렌더링 과정은 props와 state를 기반으로 UI를 계산하는 단계이며, 이 과정에서 부수 효과(side effect)를 발생시켜서는 안 됩니다. 상태 업데이트는 대표적인 부수 효과이므로, 렌더링 중에 다른 컴포넌트의 상태를 변경하면 React의 조정(reconciliation) 알고리즘이 혼란스러워지고 예측 불가능한 동작이 발생할 수 있습니다. 이 에러를 무시하면 애플리케이션의 성능 저하, 무한 루프, 또는 UI 불일치 문제가 발생할 수 있어 반드시 해결해야 합니다.

발생 원인 5가지

1. 렌더링 중 setState 직접 호출

가장 흔한 원인은 컴포넌트의 렌더 메서드나 함수형 컴포넌트 본문에서 직접 setState를 호출하는 경우입니다. 예를 들어, 조건부 로직에서 상태를 업데이트하거나 props 변경에 반응하여 즉시 상태를 설정하려는 시도가 이에 해당합니다.

2. 부모 컴포넌트 상태를 자식이 렌더링 중 변경

자식 컴포넌트가 렌더링되는 동안 props로 전달받은 함수를 통해 부모 컴포넌트의 상태를 변경하려고 할 때 발생합니다. 특히 자식 컴포넌트의 렌더 로직 내에서 부모의 setState 함수를 호출하는 경우가 대표적입니다.

3. useEffect 누락 또는 잘못된 의존성

부수 효과가 필요한 로직을 useEffect 훅으로 감싸지 않고 컴포넌트 본문에 직접 작성한 경우입니다. 또는 useEffect의 의존성 배열을 잘못 설정하여 매 렌더링마다 실행되는 경우도 이 문제를 일으킵니다.

4. 이벤트 핸들러를 렌더링 시점에 실행

이벤트 핸들러 함수를 정의하는 것이 아니라 렌더링 중에 즉시 실행하는 실수입니다. 예를 들어 onClick={handleClick()}처럼 괄호를 붙여 함수를 즉시 호출하는 경우가 해당됩니다.

5. 조건부 렌더링에서 상태 업데이트

JSX 내부의 조건부 렌더링 로직에서 직접 상태 업데이트 함수를 호출하는 경우입니다. 삼항 연산자나 논리 연산자 내에서 setState를 호출하면 이 에러가 발생합니다.

해결방법 7가지

해결법 1: useEffect 훅 사용

부수 효과가 필요한 모든 상태 업데이트 로직은 useEffect로 감싸야 합니다.

// ❌ 잘못된 예
function Component({ data }) {
  const [count, setCount] = useState(0);
  
  if (data.length > 0) {
    setCount(data.length); // 렌더링 중 상태 업데이트!
  }
  
  return 
{count}
;
}

// ✅ 올바른 예
function Component({ data }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setCount(data.length);
  }, [data.length]);
  
  return 
{count}
;
}

해결법 2: 이벤트 핸들러로 이동

사용자 인터랙션에 반응하는 로직은 이벤트 핸들러 내부에서 처리해야 합니다.

// ❌ 잘못된 예
function Parent() {
  const [value, setValue] = useState('');
  return  setValue('updated')} />;
}

// ✅ 올바른 예
function Parent() {
  const [value, setValue] = useState('');
  return  setValue('updated')} />;
}

해결법 3: 파생 상태 사용

계산 가능한 값은 별도 상태로 관리하지 말고 렌더링 중 계산합니다.

// ❌ 잘못된 예
function Component({ items }) {
  const [count, setCount] = useState(0);
  setCount(items.length); // 매 렌더링마다 실행됨
  return 
{count}
;
}

// ✅ 올바른 예
function Component({ items }) {
  const count = items.length; // 파생 상태
  return 
{count}
;
}

해결법 4: useMemo로 최적화

복잡한 계산이 필요한 경우 useMemo를 사용하여 메모이제이션합니다.

function Component({ data }) {
  const expensiveValue = useMemo(() => {
    return data.reduce((acc, item) => acc + item.value, 0);
  }, [data]);
  
  return 
{expensiveValue}
;
}

해결법 5: 콜백 refs 활용

DOM 요소에 접근하여 작업이 필요한 경우 콜백 ref를 사용합니다.

function Component() {
  const [height, setHeight] = useState(0);
  
  const measureRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);
  
  return 
높이: {height}px
;
}

해결법 6: 상태 끌어올리기 재고

상태 관리 위치를 재검토하여 적절한 컴포넌트에서 관리합니다.

// ✅ 상태를 적절한 위치에 배치
function Parent() {
  const [sharedState, setSharedState] = useState('');
  
  return (
    <>
      
      
    
  );
}

해결법 7: useLayoutEffect 고려

DOM 변경 직후 동기적 업데이트가 필요한 경우 useLayoutEffect를 사용합니다.

function Component() {
  const [scrollY, setScrollY] = useState(0);
  
  useLayoutEffect(() => {
    const updateScrollY = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', updateScrollY);
    return () => window.removeEventListener('scroll', updateScrollY);
  }, []);
  
  return 
스크롤 위치: {scrollY}
;
}

예방법과 베스트 프랙티스

Cannot update a component while rendering 에러를 예방하기 위한 핵심 원칙은 렌더링 로직을 순수하게 유지하는 것입니다. 첫째, 컴포넌트 본문에서는 절대 setState를 직접 호출하지 않습니다. 둘째, 모든 부수 효과는 useEffect, useLayoutEffect, 또는 이벤트 핸들러 내부에서만 처리합니다. 셋째, ESLint의 react-hooks/exhaustive-deps 규칙을 활성화하여 의존성 배열을 올바르게 관리합니다. 넷째, props에서 파생 가능한 값은 별도 상태로 저장하지 말고 렌더링 중 계산합니다. 다섯째, React DevTools의 Profiler를 사용하여 불필요한 리렌더링을 감지하고 최적화합니다. 마지막으로 컴포넌트 설계 시 단일 책임 원칙을 지켜 각 컴포넌트가 명확한 역할을 갖도록 구성하면 이러한 문제를 사전에 방지할 수 있습니다.

마무리

Cannot update a component while rendering 에러는 React의 핵심 원칙을 이해하면 쉽게 해결할 수 있는 문제입니다. 렌더링 단계는 순수 함수로 유지하고, 모든 상태 업데이트는 적절한 생명주기 메서드나 이벤트 핸들러에서 처리하는 것이 핵심입니다. 이 글에서 소개한 7가지 해결 방법을 실전에 적용하면 더 이상 이 에러로 고민하지 않을 것입니다. 올바른 패턴을 익혀 안정적이고 유지보수하기 쉬운 React 애플리케이션을 개발하시기 바랍니다.