Blog

React 개발 시 만나는 Cannot update a component while rendering 에러란?

React 애플리케이션을 개발하다 보면 “Cannot update a component while rendering a different component” 또는 “Cannot update a component while rendering”이라는 에러 메시지를 마주하게 됩니다. 이 에러는 React 16.13 버전부터 엄격하게 감지되기 시작했으며, 컴포넌트 렌더링 중에 다른 컴포넌트의 상태를 업데이트하려고 할 때 발생합니다. 이는 React의 단방향 데이터 흐름 원칙을 위반하는 것으로, 예측 불가능한 동작과 무한 루프를 유발할 수 있어 React가 명시적으로 막고 있는 안티패턴입니다. 이 에러를 제대로 이해하고 해결하는 것은 안정적인 React 애플리케이션을 만드는 데 필수적입니다.

에러 상세 분석 – 왜 React는 이를 막을까?

Cannot update a component while rendering 에러가 발생하는 근본적인 이유는 React의 렌더링 메커니즘과 관련이 있습니다. React는 컴포넌트를 렌더링할 때 순수 함수처럼 동작해야 한다고 가정합니다. 즉, 같은 props와 state가 주어지면 항상 같은 결과를 반환해야 합니다. 하지만 렌더링 중에 다른 컴포넌트의 상태를 변경하면 이 순수성이 깨지게 됩니다.

렌더링 도중 상태 업데이트가 발생하면 다음과 같은 문제가 생깁니다. 첫째, 무한 렌더링 루프에 빠질 수 있습니다. 컴포넌트 A가 렌더링되면서 컴포넌트 B의 상태를 변경하고, B가 다시 렌더링되면서 A의 상태를 변경하는 순환이 발생할 수 있습니다. 둘째, 예측 불가능한 UI 동작이 나타납니다. 렌더링 순서에 따라 다른 결과가 나올 수 있어 버그를 추적하기 매우 어려워집니다. 셋째, 성능 저하가 발생합니다. 불필요한 재렌더링이 반복되어 애플리케이션이 느려집니다. React는 이러한 문제를 사전에 방지하기 위해 엄격하게 이 패턴을 차단합니다.

주요 발생 원인 5가지

1. 렌더링 중 직접적인 setState 호출

가장 흔한 원인은 컴포넌트의 JSX 반환 부분이나 렌더 함수 본문에서 직접 setState를 호출하는 경우입니다. 예를 들어, 조건부 렌더링 로직 안에서 상태를 업데이트하면 이 에러가 발생합니다.

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

자식 컴포넌트가 렌더링되는 동안 props로 받은 setState 함수를 즉시 호출하여 부모의 상태를 변경하려 할 때 발생합니다. 이는 렌더링 체인 중간에 상태 변경을 시도하는 것이므로 React가 차단합니다.

3. useEffect 없이 비동기 작업 후 상태 업데이트

컴포넌트 본문에서 직접 비동기 함수를 호출하고 그 결과로 상태를 업데이트하는 경우입니다. 이는 렌더링이 완료되기 전에 상태 변경을 시도하는 것이므로 문제가 됩니다.

4. 계산된 값에서 상태 업데이트

렌더링 중 계산되는 값을 만들면서 동시에 상태를 업데이트하려는 경우입니다. 예를 들어, useMemo나 일반 변수 선언 중에 setState를 호출하는 것입니다.

5. Context Provider에서의 즉시 업데이트

Context Provider의 value를 계산하는 도중 다른 상태를 변경하려고 하면 이 에러가 발생합니다. Provider가 렌더링되는 동안 하위 컴포넌트의 상태를 바꾸려는 시도가 이에 해당합니다.

해결방법 7가지 – 코드 예제 포함

해결법 1: useEffect로 이동

가장 기본적이고 권장되는 해결법은 상태 업데이트를 useEffect 훅으로 이동하는 것입니다.

// 잘못된 예시
function BadComponent() {
  const [count, setCount] = useState(0);
  
  // 렌더링 중 상태 업데이트 - 에러 발생!
  if (count < 5) {
    setCount(count + 1);
  }
  
  return 
{count}
;
}

// 올바른 예시
function GoodComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    if (count < 5) {
      setCount(count + 1);
    }
  }, [count]);
  
  return 
{count}
;
}

해결법 2: 이벤트 핸들러 사용

상태 변경을 사용자 인터랙션에 연결하여 이벤트 핸들러에서 처리합니다.

function Component({ onValueChange }) {
  const [value, setValue] = useState('');
  
  // 잘못된 예시 - 렌더링 중 부모 상태 변경
  // onValueChange(value);
  
  // 올바른 예시 - 이벤트 핸들러에서 처리
  const handleChange = (e) => {
    const newValue = e.target.value;
    setValue(newValue);
    onValueChange(newValue);
  };
  
  return ;
}

해결법 3: 초기값 계산 최적화

상태의 초기값을 계산하는 함수 형태로 전달하여 한 번만 실행되도록 합니다.

function Component({ initialData }) {
  // 잘못된 예시
  // const [data, setData] = useState(processData(initialData));
  // setData(moreProcessing(data)); // 렌더링 중 업데이트
  
  // 올바른 예시
  const [data, setData] = useState(() => {
    return processData(initialData);
  });
  
  return 
{data}
;
}

해결법 4: useMemo로 계산 캐싱

계산된 값이 필요하다면 useMemo를 사용하여 상태 업데이트 없이 값을 메모이제이션합니다.

function Component({ items }) {
  const [filter, setFilter] = useState('');
  
  // 상태 업데이트 대신 메모이제이션 사용
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(filter));
  }, [items, filter]);
  
  return (
    

       setFilter(e.target.value)} />
      {filteredItems.map(item => 
{item}
)}
    
  );
}

해결법 5: useLayoutEffect 활용

DOM 업데이트 직후, 브라우저가 화면을 그리기 전에 동기적으로 실행해야 하는 경우 useLayoutEffect를 사용합니다.

function Component() {
  const [height, setHeight] = useState(0);
  const ref = useRef(null);
  
  useLayoutEffect(() => {
    if (ref.current) {
      setHeight(ref.current.offsetHeight);
    }
  }, []);
  
  return 
높이: {height}px
;
}

해결법 6: Ref로 상태 대체

렌더링을 트리거하지 않아도 되는 값이라면 useRef를 사용합니다.

function Component() {
  const renderCount = useRef(0);
  
  // 렌더링마다 증가하지만 재렌더링을 일으키지 않음
  renderCount.current += 1;
  
  return 
렌더링 횟수: {renderCount.current}
;
}

해결법 7: 파생 상태 제거

상태에서 직접 계산할 수 있는 값은 별도 상태로 관리하지 않습니다.

function Component({ price }) {
  // 잘못된 예시 - 불필요한 상태
  // const [total, setTotal] = useState(0);
  // setTotal(price * 1.1); // 에러!
  
  // 올바른 예시 - 직접 계산
  const total = price * 1.1;
  
  return 
총액: {total}원
;
}

예방법과 베스트 프랙티스

Cannot update a component while rendering 에러를 예방하기 위해서는 다음 원칙들을 따라야 합니다. 첫째, 렌더링 함수를 순수하게 유지하세요. 컴포넌트 본문에서는 계산과 JSX 생성만 하고, 부수 효과는 useEffect나 이벤트 핸들러에서 처리합니다. 둘째, 상태 업데이트의 타이밍을 명확히 하세요. 컴포넌트 마운트 시점, 사용자 인터랙션, 외부 데이터 변경 등 각 상황에 맞는 적절한 위치에서 상태를 업데이트합니다.

셋째, 파생 상태를 최소화하세요. 다른 상태나 props에서 계산 가능한 값은 상태로 관리하지 말고 렌더링 시 직접 계산하거나 useMemo를 사용합니다. 넷째, React DevTools와 Strict Mode를 활용하여 개발 단계에서 문제를 조기에 발견하세요. Strict Mode는 의도적으로 컴포넌트를 두 번 렌더링하여 부수 효과를 찾아내는 데 도움을 줍니다. 다섯째, ESLint의 react-hooks 플러그인을 사용하여 훅 사용 규칙을 자동으로 검사하세요.

마무리

Cannot update a component while rendering 에러는 React의 렌더링 원칙을 이해하고 올바른 패턴을 적용하면 충분히 예방하고 해결할 수 있습니다. 핵심은 렌더링 함수를 순수하게 유지하고, 상태 업데이트는 적절한 생명주기 메서드나 이벤트 핸들러에서 처리하는 것입니다. useEffect, useMemo, useCallback 같은 React 훅을 올바르게 활용하면 이 에러를 효과적으로 방지할 수 있습니다. 이 가이드에서 소개한 원인 분석과 해결법들을 실전에 적용하여 더 안정적이고 예측 가능한 React 애플리케이션을 만들어보세요.