Blog

도입

React 개발 중 ‘Cannot update a component while rendering’ 에러를 만나보셨나요? 이 에러는 React 개발자라면 한 번쯤 마주치게 되는 대표적인 렌더링 에러입니다. 특히 상태 관리를 다룰 때 자주 발생하며, 초보 개발자뿐만 아니라 경험 많은 개발자도 실수로 발생시킬 수 있습니다. 이 에러는 컴포넌트가 렌더링되는 동안 다른 컴포넌트의 상태를 변경하려고 할 때 발생합니다. React는 렌더링 프로세스의 순수성을 유지하기 위해 이러한 동작을 엄격하게 제한합니다. 이 글에서는 에러의 정확한 원인부터 실전 해결법, 그리고 예방 방법까지 완벽하게 정리해드리겠습니다.

에러 상세 분석

Cannot update a component while rendering another component 에러는 React 16.8 이후 버전에서 도입된 경고 메시지입니다. 이 에러의 핵심은 ‘렌더링 순수성(Render Purity)’ 원칙 위반입니다. React 컴포넌트의 렌더링 과정은 순수 함수처럼 동작해야 하며, 부수 효과(side effects)가 없어야 합니다. 즉, 렌더링 중에는 외부 상태를 변경하거나 다른 컴포넌트를 업데이트해서는 안 됩니다. 이 에러가 발생하면 브라우저 콘솔에 ‘Warning: Cannot update a component (`ComponentName`) while rendering a different component (`AnotherComponent`)’와 같은 형태로 표시됩니다. 에러 메시지는 어떤 컴포넌트가 렌더링 중이고, 어떤 컴포넌트를 업데이트하려고 시도했는지 명확히 알려줍니다. 이를 무시하면 무한 루프, 성능 저하, 예측 불가능한 UI 동작 등 심각한 문제로 이어질 수 있습니다.

발생 원인 5가지

1. 렌더링 중 직접 setState 호출

가장 흔한 원인은 컴포넌트 함수 바디에서 직접 setState를 호출하는 경우입니다. 렌더링이 실행될 때마다 setState가 호출되어 다시 렌더링을 트리거하면서 무한 루프가 발생합니다.

2. props를 통한 부모 상태 업데이트

자식 컴포넌트가 렌더링되는 동안 props로 받은 setState 함수를 호출하여 부모 컴포넌트의 상태를 변경하려는 경우입니다. 이는 렌더링 체인을 깨뜨리는 행위입니다.

3. useEffect 의존성 배열 오류

useEffect의 의존성 배열을 잘못 설정하여 매 렌더링마다 effect가 실행되고, 그 안에서 상태를 업데이트하는 경우입니다.

4. 조건부 렌더링에서의 상태 변경

JSX 내부에서 조건부로 컴포넌트를 렌더링할 때, 그 과정에서 상태를 변경하는 로직이 포함된 경우입니다.

5. Context Provider 값 직접 수정

Context Provider의 value를 렌더링 중에 직접 변경하거나, Consumer 내부에서 Provider의 상태를 업데이트하려는 경우 발생합니다.

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

방법 1: useEffect로 상태 업데이트 이동

렌더링 중 실행되는 setState를 useEffect 안으로 옮겨서 렌더링 후에 실행되도록 합니다.

// 잘못된 코드
function MyComponent() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // 에러 발생!
  return 
{count}
;
}

// 올바른 코드
function MyComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setCount(count + 1);
  }, []); // 빈 배열로 초기 마운트시에만 실행
  
  return 
{count}
;
}

방법 2: 이벤트 핸들러 활용

상태 변경을 사용자 액션에 따른 이벤트 핸들러로 처리합니다.

function Counter() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1);
  };
  
  return Count: {count};
}

방법 3: useMemo로 계산값 캐싱

매 렌더링마다 계산이 필요한 값은 useMemo를 사용해 메모이제이션합니다.

function ExpensiveComponent({ items }) {
  const expensiveValue = useMemo(() => {
    return items.reduce((sum, item) => sum + item.value, 0);
  }, [items]);
  
  return 
Total: {expensiveValue}
;
}

방법 4: useCallback으로 함수 안정화

자식 컴포넌트에 전달하는 콜백 함수를 useCallback으로 감싸서 불필요한 재생성을 방지합니다.

function ParentComponent() {
  const [data, setData] = useState([]);
  
  const handleUpdate = useCallback((newItem) => {
    setData(prev => [...prev, newItem]);
  }, []);
  
  return ;
}

방법 5: 파생 상태 제거

props나 state로부터 계산 가능한 값은 별도 state로 관리하지 않습니다.

// 잘못된 코드
function UserProfile({ user }) {
  const [fullName, setFullName] = useState('');
  setFullName(`${user.firstName} ${user.lastName}`); // 에러!
  return 
{fullName}
;
}

// 올바른 코드
function UserProfile({ user }) {
  const fullName = `${user.firstName} ${user.lastName}`;
  return 
{fullName}
;
}

방법 6: ref 활용으로 렌더링 최적화

렌더링을 트리거하지 않아야 하는 값은 useRef를 사용합니다.

function TimerComponent() {
  const timerRef = useRef(null);
  
  useEffect(() => {
    timerRef.current = setInterval(() => {
      console.log('Tick');
    }, 1000);
    
    return () => clearInterval(timerRef.current);
  }, []);
  
  return 
Timer Running
;
}

방법 7: 조건부 로직을 useEffect로 이동

조건에 따른 상태 업데이트는 useEffect 내부에서 처리합니다.

function ConditionalComponent({ shouldUpdate, value }) {
  const [state, setState] = useState(null);
  
  useEffect(() => {
    if (shouldUpdate) {
      setState(value);
    }
  }, [shouldUpdate, value]);
  
  return 
{state}
;
}

예방법과 베스트 프랙티스

Cannot update a component while rendering 에러를 예방하기 위한 핵심 원칙은 ‘렌더링 함수의 순수성 유지’입니다. 첫째, 컴포넌트 함수 바디에서는 절대 setState를 직접 호출하지 마세요. 모든 상태 업데이트는 이벤트 핸들러나 useEffect 내부에서 처리해야 합니다. 둘째, ESLint의 react-hooks 플러그인을 활용하여 잘못된 Hook 사용 패턴을 사전에 감지하세요. 셋째, React DevTools의 Profiler를 사용해 불필요한 리렌더링을 모니터링하고 최적화하세요. 넷째, 상태 관리 로직이 복잡해지면 useReducer나 상태 관리 라이브러리(Zustand, Redux) 도입을 고려하세요. 다섯째, 코드 리뷰 시 렌더링 로직과 상태 업데이트 로직이 명확히 분리되어 있는지 확인하는 습관을 들이세요.

마무리

Cannot update a component while rendering 에러는 React의 렌더링 원칙을 이해하면 충분히 예방하고 해결할 수 있는 문제입니다. 이 에러를 만났을 때는 당황하지 말고, 에러 메시지가 가리키는 컴포넌트를 찾아 렌더링 중 상태를 변경하는 코드가 있는지 확인하세요. 그리고 이 글에서 소개한 7가지 해결법 중 상황에 맞는 방법을 적용하면 됩니다. 올바른 React 패턴을 익히고 적용하면, 더 안정적이고 예측 가능한 애플리케이션을 만들 수 있습니다. 렌더링의 순수성을 지키는 것이 React 개발의 핵심이라는 점을 항상 기억하세요.