Cannot update a component while rendering 완벽 해결법

React 개발 중 ‘Cannot update a component while rendering a different component’ 에러를 마주친 적이 있나요? 이 에러는 React 개발자라면 한 번쯤 겪게 되는 흔한 문제입니다. Cannot update a component while rendering 에러는 컴포넌트가 렌더링되는 도중에 다른 컴포넌트의 상태를 변경하려고 할 때 발생합니다. 이는 React의 단방향 데이터 흐름 원칙을 위반하는 것으로, 예측 불가능한 동작과 무한 루프를 초래할 수 있습니다. 이 글에서는 에러의 원인부터 실전 해결법, 그리고 예방 방법까지 상세히 다루어 여러분이 이 문제를 완벽하게 해결할 수 있도록 돕겠습니다.

에러 상세 분석

이 에러의 정확한 메시지는 ‘Warning: Cannot update a component (`ComponentName`) while rendering a different component (`AnotherComponent`)’입니다. React는 렌더링 단계에서 순수 함수처럼 동작해야 하며, 부수 효과(side effects)가 없어야 합니다. 렌더링 중에 상태를 변경하면 React의 재조정(reconciliation) 프로세스가 혼란에 빠지고, 무한 렌더링 루프나 예기치 않은 UI 업데이트가 발생할 수 있습니다. 이 에러는 개발 모드에서만 경고로 표시되지만, 프로덕션 환경에서는 심각한 성능 문제와 버그를 일으킬 수 있습니다. React 18 이상에서는 더욱 엄격하게 이 규칙을 적용하므로, 올바른 패턴을 이해하고 적용하는 것이 매우 중요합니다. 렌더링 단계는 컴포넌트 함수가 실행되어 JSX를 반환하는 과정이며, 이 단계에서는 상태 변경, DOM 조작, API 호출 등의 부수 효과가 발생해서는 안 됩니다.

발생 원인 5가지

1. 렌더링 중 직접 setState 호출

컴포넌트 함수 본문에서 직접 setState를 호출하는 것이 가장 흔한 원인입니다. 조건문 안에서도 렌더링 중에 실행되면 동일한 문제가 발생합니다.

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

자식 컴포넌트가 렌더링되는 동안 props로 받은 setState 함수를 즉시 호출하면, 부모 컴포넌트의 상태가 렌더링 중에 변경되어 이 에러가 발생합니다.

3. useEffect 의존성 배열 누락

useEffect의 의존성 배열을 제대로 설정하지 않아 무한 루프가 발생하거나, 렌더링 단계에서 상태 업데이트가 트리거될 수 있습니다.

4. 이벤트 핸들러를 즉시 실행

onClick={handleClick()}처럼 이벤트 핸들러를 즉시 실행 형태로 전달하면 렌더링 시점에 함수가 실행되어 상태가 변경됩니다.

5. ref 콜백에서 상태 업데이트

ref 콜백 함수 내에서 상태를 업데이트하면 렌더링 중에 상태 변경이 발생할 수 있습니다.

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

해결법 1: useEffect로 부수 효과 이동

렌더링 중 발생하는 상태 업데이트를 useEffect로 이동시킵니다.

// 잘못된 예시
function BadComponent() {
  const [count, setCount] = useState(0);
  setCount(1); // 렌더링 중 호출 - 에러 발생!
  return 
{count}
;
}

// 올바른 예시
function GoodComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setCount(1); // useEffect 내부에서 안전하게 호출
  }, []);
  
  return 
{count}
;
}

해결법 2: 이벤트 핸들러 올바르게 전달

이벤트 핸들러는 함수 참조로 전달하거나 화살표 함수로 감싸서 전달합니다.

// 잘못된 예시
function BadButton({ onClick }) {
  return 클릭; // 즉시 실행됨
}

// 올바른 예시 1: 함수 참조 전달
function GoodButton1({ onClick }) {
  return 클릭;
}

// 올바른 예시 2: 화살표 함수로 감싸기
function GoodButton2({ onClick }) {
  return  onClick()}>클릭;
}

해결법 3: 자식에서 부모 상태 변경 시 useEffect 사용

자식 컴포넌트에서 부모의 상태를 변경해야 할 때는 useEffect를 활용합니다.

// 잘못된 예시
function ChildComponent({ setParentState }) {
  setParentState('new value'); // 렌더링 중 부모 상태 변경
  return 
자식
;
}

// 올바른 예시
function ChildComponent({ setParentState }) {
  useEffect(() => {
    setParentState('new value');
  }, [setParentState]);
  
  return 
자식
;
}

해결법 4: 조건부 렌더링에서 초기화 로직 분리

조건부 로직과 상태 업데이트를 useEffect로 분리합니다.

// 잘못된 예시
function BadComponent({ data }) {
  const [processed, setProcessed] = useState(null);
  
  if (data && !processed) {
    setProcessed(data); // 조건부이지만 렌더링 중 호출
  }
  
  return 
{processed}
;
}

// 올바른 예시
function GoodComponent({ data }) {
  const [processed, setProcessed] = useState(null);
  
  useEffect(() => {
    if (data && !processed) {
      setProcessed(data);
    }
  }, [data, processed]);
  
  return 
{processed}
;
}

해결법 5: useMemo로 계산 결과 캐싱

매번 계산하는 대신 useMemo를 사용하여 불필요한 상태 업데이트를 방지합니다.

function OptimizedComponent({ items }) {
  // 상태 없이 메모이제이션으로 해결
  const sortedItems = useMemo(() => {
    return [...items].sort((a, b) => a.name.localeCompare(b.name));
  }, [items]);
  
  return 
{sortedItems.map(item => 
{item.name}
)}
;
}

해결법 6: 상태 업데이트 함수형 업데이트 활용

이전 상태를 기반으로 업데이트할 때는 함수형 업데이트를 사용합니다.

function Counter() {
  const [count, setCount] = useState(0);
  
  const increment = () => {
    // 함수형 업데이트로 안전하게 처리
    setCount(prevCount => prevCount + 1);
  };
  
  return 카운트: {count};
}

해결법 7: ref와 useLayoutEffect 조합

DOM 측정이 필요한 경우 useLayoutEffect를 사용합니다.

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

예방법과 베스트 프랙티스

Cannot update a component while rendering 에러를 예방하기 위한 핵심 원칙은 렌더링 단계의 순수성을 유지하는 것입니다. 첫째, 컴포넌트 함수 본문에서는 절대 setState를 직접 호출하지 마세요. 둘째, 모든 부수 효과는 useEffect, useLayoutEffect, 또는 이벤트 핸들러 내부에서 처리하세요. 셋째, ESLint의 react-hooks 플러그인을 활용하여 의존성 배열을 올바르게 관리하세요. 넷째, 상태가 필요 없는 계산은 useMemo나 일반 변수로 처리하세요. 다섯째, React DevTools를 활용하여 불필요한 리렌더링을 모니터링하고 최적화하세요. 이러한 베스트 프랙티스를 따르면 더 안정적이고 예측 가능한 React 애플리케이션을 구축할 수 있습니다.

마무리

React에서 Cannot update a component while rendering 에러는 렌더링 단계의 순수성을 위반했을 때 발생합니다. 이 글에서 소개한 7가지 해결법을 적용하면 대부분의 경우를 해결할 수 있습니다. 핵심은 상태 업데이트와 부수 효과를 적절한 시점(useEffect, 이벤트 핸들러)에 수행하는 것입니다. 이러한 패턴을 습관화하면 더욱 안정적이고 유지보수하기 쉬운 React 코드를 작성할 수 있습니다. 문제가 발생했을 때는 React DevTools의 콘솔 메시지를 주의 깊게 읽고, 어떤 컴포넌트에서 어떤 컴포넌트를 업데이트하려 했는지 파악하는 것이 해결의 첫걸음입니다.