React Cannot update a component while rendering 에러 완벽 해결 가이드

1. 도입 – Cannot update a component while rendering 에러란?

React 개발 중 ‘Cannot update a component while rendering a different component’라는 에러 메시지를 마주치면 당황스러울 수 있습니다. 이 에러는 React 16.13 버전 이후 더욱 엄격하게 감지되며, 컴포넌트가 렌더링되는 동안 다른 컴포넌트의 상태를 업데이트하려고 할 때 발생합니다. 이는 예측 불가능한 렌더링 동작과 무한 루프를 방지하기 위한 React의 안전 장치입니다. 이 에러를 제대로 이해하지 못하면 애플리케이션의 성능 저하와 예상치 못한 버그로 이어질 수 있습니다. 이 글에서는 Cannot update a component while rendering 에러의 근본 원인부터 실전 해결 방법, 그리고 예방 기법까지 상세히 다룹니다.

2. 에러 상세 분석

이 에러의 전체 메시지는 일반적으로 다음과 같습니다: “Warning: Cannot update a component (`ComponentB`) while rendering a different component (`ComponentA`). To locate the bad setState() call inside `ComponentA`, follow the stack trace as described.”

React는 단방향 데이터 흐름을 유지하기 위해 렌더링 단계와 커밋 단계를 명확히 구분합니다. 렌더링 단계는 순수해야 하며 부수 효과(side effects)가 없어야 합니다. 그러나 렌더링 중에 setState나 dispatch 같은 상태 업데이트 함수를 호출하면 다른 컴포넌트의 재렌더링을 트리거하여 예측 불가능한 동작이 발생합니다. 이는 렌더링 순서가 보장되지 않는 React의 특성상 무한 루프나 성능 문제를 야기할 수 있습니다. React는 이를 방지하기 위해 개발 모드에서 경고를 표시하며, 프로덕션에서도 예상치 못한 버그로 이어질 수 있습니다.

3. 발생 원인 5가지

3.1 렌더링 중 직접적인 setState 호출

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

3.2 부모 컴포넌트로의 역방향 상태 업데이트

자식 컴포넌트가 렌더링되는 동안 props로 받은 콜백 함수를 호출하여 부모의 상태를 변경하는 경우입니다. 특히 렌더링 도중 조건부로 부모 상태를 업데이트할 때 자주 발생합니다.

3.3 useEffect 없이 부수 효과 실행

API 호출이나 구독 설정 같은 부수 효과를 useEffect 없이 컴포넌트 본문에서 직접 실행하면 렌더링마다 상태 업데이트가 트리거됩니다.

3.4 ref 콜백에서의 상태 업데이트

ref 콜백 함수 내에서 상태를 업데이트하면 렌더링 중에 실행되어 에러가 발생할 수 있습니다.

3.5 Context Provider의 값 변경

렌더링 중에 Context Provider의 value를 변경하거나, Context를 소비하는 컴포넌트가 렌더링 중에 Provider의 상태를 업데이트하려 할 때 발생합니다.

4. 해결방법 7가지 (코드 포함)

4.1 useEffect로 부수 효과 이동

렌더링 중 실행되는 상태 업데이트를 useEffect로 이동시킵니다.

// 잘못된 예
function BadComponent({ data }) {
  if (data.length > 10) {
    setWarning(true); // 에러 발생!
  }
  return 
{data}
;
}

// 올바른 예
function GoodComponent({ data }) {
  const [warning, setWarning] = useState(false);
  
  useEffect(() => {
    if (data.length > 10) {
      setWarning(true);
    }
  }, [data]);
  
  return 
{data}
;
}

4.2 파생 상태 사용

상태를 별도로 저장하는 대신 렌더링 중 계산합니다.

// 잘못된 예
function BadComponent({ items }) {
  const [count, setCount] = useState(0);
  if (items.length !== count) {
    setCount(items.length); // 에러 발생!
  }
  return 
Count: {count}
;
}

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

4.3 이벤트 핸들러로 이동

상태 업데이트를 사용자 이벤트 핸들러로 이동시킵니다.

// 잘못된 예
function BadComponent({ onUpdate }) {
  onUpdate(); // 렌더링 중 호출 - 에러!
  return Click;
}

// 올바른 예
function GoodComponent({ onUpdate }) {
  const handleClick = () => {
    onUpdate();
  };
  return Click;
}

4.4 useLayoutEffect 활용

DOM 측정 후 즉시 상태 업데이트가 필요한 경우 사용합니다.

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

4.5 상태 초기화 함수 사용

props 기반 초기 상태는 초기화 함수로 설정합니다.

// 잘못된 예
function BadComponent({ initialValue }) {
  const [value, setValue] = useState(0);
  if (value === 0) {
    setValue(initialValue); // 에러!
  }
  return 
{value}
;
}

// 올바른 예
function GoodComponent({ initialValue }) {
  const [value, setValue] = useState(() => initialValue);
  return 
{value}
;
}

4.6 key prop 활용하여 컴포넌트 리셋

props 변경 시 컴포넌트를 완전히 리셋하려면 key를 사용합니다.

function ParentComponent({ userId }) {
  return ;
}

function UserProfile({ userId }) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(setData);
  }, [userId]);
  
  return 
{data?.name}
;
}

4.7 useMemo로 계산 최적화

복잡한 계산은 useMemo로 메모이제이션합니다.

function Component({ items }) {
  const filteredItems = useMemo(() => {
    return items.filter(item => item.active);
  }, [items]);
  
  return ;
}

5. 예방법과 베스트 프랙티스

렌더링 함수를 순수하게 유지: 컴포넌트 본문은 같은 입력에 항상 같은 출력을 반환해야 하며, 부수 효과가 없어야 합니다. 모든 상태 업데이트는 이벤트 핸들러나 useEffect 내부에서만 수행하세요.

ESLint 규칙 활용: eslint-plugin-react-hooks의 ‘exhaustive-deps’ 규칙을 활성화하여 의존성 배열을 올바르게 관리하고, 잠재적인 문제를 사전에 발견하세요.

상태 설계 개선: 파생 가능한 값은 상태로 저장하지 말고 렌더링 중 계산하세요. 이는 동기화 문제를 근본적으로 방지합니다.

React DevTools Profiler 사용: 렌더링 패턴을 분석하여 불필요한 렌더링과 상태 업데이트를 식별하고 최적화하세요.

단방향 데이터 흐름 준수: 데이터는 항상 부모에서 자식으로 흐르고, 이벤트는 자식에서 부모로 전달되어야 합니다. 이 원칙을 지키면 대부분의 렌더링 에러를 예방할 수 있습니다.

6. 마무리

Cannot update a component while rendering 에러는 React의 렌더링 원칙을 이해하면 쉽게 해결할 수 있습니다. 핵심은 렌더링 함수를 순수하게 유지하고, 모든 부수 효과를 적절한 생명주기 메서드나 이벤트 핸들러로 이동하는 것입니다. 이 가이드에서 제시한 해결 방법들을 적용하면 에러를 빠르게 해결하고, 더 안정적이고 예측 가능한 React 애플리케이션을 구축할 수 있습니다. 렌더링 최적화와 올바른 상태 관리는 React 개발의 핵심이며, 이를 마스터하면 더 나은 사용자 경험을 제공할 수 있습니다.