Cannot update a component while rendering 완벽 해결법

React 개발 중 Cannot update a component while rendering 에러를 만나본 적이 있나요? 이 에러는 React의 렌더링 순수성 원칙을 위반할 때 발생하는 대표적인 경고 메시지입니다. 컴포넌트가 렌더링되는 동안 다른 컴포넌트의 상태를 변경하려고 시도하면 React는 즉시 이 에러를 발생시킵니다. 렌더링 과정은 순수 함수여야 하며 부작용이 없어야 한다는 React의 핵심 원칙을 이해하지 못하면 이 에러를 반복적으로 마주치게 됩니다. 이 글에서는 에러의 근본 원인부터 실전 해결법, 그리고 예방 전략까지 체계적으로 다루어 여러분이 이 문제를 완벽하게 해결할 수 있도록 도와드리겠습니다.

에러 상세 분석

Cannot update a component while rendering은 React 16.8 이후 도입된 엄격한 렌더링 규칙에서 비롯됩니다. 정확한 에러 메시지는 “Cannot update a component (`ComponentName`) while rendering a different component (`AnotherComponent`)”입니다. 이 에러는 주로 개발 모드에서 경고로 나타나지만, 프로덕션에서는 예측 불가능한 버그를 초래할 수 있습니다. 에러가 발생하는 핵심 이유는 React의 렌더링 페이즈가 순수해야 한다는 원칙 때문입니다. 렌더링 중에는 DOM을 직접 조작하거나 상태를 변경하는 등의 부작용(side effects)이 허용되지 않습니다. React는 컴포넌트를 여러 번 렌더링할 수 있으며, 각 렌더링은 동일한 입력에 대해 동일한 출력을 생성해야 합니다. 이 에러는 보통 콘솔에 빨간색으로 표시되며, 어떤 컴포넌트가 어떤 컴포넌트를 업데이트하려 했는지 명확히 알려줍니다. 에러 스택 트레이스를 따라가면 문제가 발생한 정확한 위치를 찾을 수 있습니다.

발생 원인 5가지

1. 렌더링 중 setState 직접 호출

컴포넌트 함수 본문에서 직접 setState를 호출하는 것은 가장 흔한 실수입니다. 조건문 없이 setState를 호출하면 무한 렌더링 루프가 발생할 수 있습니다.

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

자식 컴포넌트가 렌더링되는 동안 부모 컴포넌트의 상태 업데이트 함수를 호출하면 이 에러가 발생합니다. 특히 props로 전달받은 setState 함수를 렌더링 로직 안에서 실행할 때 문제가 됩니다.

3. useEffect 누락

부작용을 처리해야 하는 로직을 useEffect로 감싸지 않고 컴포넌트 본문에 직접 작성하면 렌더링마다 실행되어 에러를 유발합니다.

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

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

5. Context Provider에서 상태 변경

Context를 사용할 때 Provider 내부에서 렌더링 중에 값을 변경하려는 시도도 이 에러의 원인이 됩니다.

해결방법 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); // 렌더링 후 실행
  }, []);
  return 
{count}
;
}

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

함수를 즉시 실행하지 않고 참조만 전달합니다.

// ❌ 잘못된 코드
증가

// ✅ 올바른 코드
 setCount(count + 1)}>증가

해결법 3: useCallback으로 함수 메모이제이션

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

const handleUpdate = useCallback(() => {
  setParentState(newValue);
}, []);

해결법 4: 조건부 초기화는 useState 인자로

조건에 따른 초기값 설정은 렌더링 중이 아닌 useState의 초기화 함수에서 처리합니다.

// ❌ 잘못된 코드
function Component({ initialValue }) {
  const [value, setValue] = useState(0);
  if (value === 0) setValue(initialValue);
  return 
{value}
;
}

// ✅ 올바른 코드
function Component({ initialValue }) {
  const [value, setValue] = useState(() => initialValue);
  return 
{value}
;
}

해결법 5: useLayoutEffect 활용

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

useLayoutEffect(() => {
  const height = ref.current.offsetHeight;
  setHeight(height);
}, []);

해결법 6: 파생 상태 제거

상태로 관리하지 않고 렌더링 시 계산하도록 변경합니다.

// ❌ 잘못된 코드
const [filteredList, setFilteredList] = useState([]);
setFilteredList(list.filter(item => item.active));

// ✅ 올바른 코드
const filteredList = useMemo(
  () => list.filter(item => item.active),
  [list]
);

해결법 7: Ref 사용

렌더링과 무관한 값은 useRef로 관리합니다.

const countRef = useRef(0);
countRef.current += 1; // 렌더링 트리거 없음

예방법과 베스트 프랙티스

이 에러를 예방하려면 React의 렌더링 원칙을 명확히 이해해야 합니다. 첫째, 컴포넌트 함수 본문은 순수 함수로 작성하여 동일한 props와 state에 대해 항상 동일한 JSX를 반환하도록 합니다. 둘째, 모든 부작용(API 호출, 구독, 타이머 등)은 반드시 useEffect나 이벤트 핸들러 내부에서 처리합니다. 셋째, ESLint의 react-hooks 플러그인을 활성화하여 잘못된 패턴을 조기에 발견합니다. 넷째, 상태 업데이트가 필요한 경우 왜 필요한지, 언제 실행되어야 하는지 명확히 파악한 후 적절한 위치(useEffect, 이벤트 핸들러 등)에 배치합니다. 다섯째, useMemo와 useCallback을 적절히 활용하여 불필요한 재렌더링과 재계산을 방지합니다. 코드 리뷰 시 렌더링 로직과 부작용 로직이 분리되어 있는지 확인하는 것도 좋은 습관입니다.

마무리

Cannot update a component while rendering 에러는 React의 렌더링 원칙을 이해하면 충분히 예방하고 해결할 수 있습니다. 이 글에서 소개한 7가지 해결법을 실전에 적용하면 대부분의 경우를 해결할 수 있습니다. 핵심은 렌더링 페이즈에서는 순수 함수를 유지하고, 모든 부작용은 useEffect나 이벤트 핸들러로 분리하는 것입니다. 에러 메시지를 주의 깊게 읽고 스택 트레이스를 따라가면 문제의 정확한 위치를 찾을 수 있습니다. React의 렌더링 생명주기를 깊이 이해하고 베스트 프랙티스를 따른다면 더욱 안정적이고 예측 가능한 애플리케이션을 개발할 수 있을 것입니다.