[React] useEffect가 두 번 실행되는 이유와 해결방법 (with. StrictMode)

저번 글에서는 React의 대표적인 훅인 useState와 useEffect의 개념과 기본 사용법에 대해 알아보았다. 이번에는 지난 시간에 배운 내용을 다시 복습할 겸 간단한 예제를 만들어 실행해 보았다.

그런데 예제를 실행하자 예상치 못한 현상이 발생했다 😂

바로 useEffect가 두 번씩 실행되는 것이었다!

이번 글에서는 이런 현상이 왜 발생했는지 원인을 파악하면서 React 훅을 좀 더 깊게 이해해 보려고 한다.

예제 코드 살펴보기

먼저 작성한 예제 코드를 살펴보자.

mport { useState, useEffect } from "react";

function Home() {
  const [countNumber, setCountNumber] = useState(0);

  useEffect(() => {
    console.log('useEffect 실행되나 확인.');
  }, [countNumber]);

return {
		<div>
      <button onClick={() => setCountNumber(countNumber + 1)}>useEffect 확인</button>
    </div>
  );
}

export default Home;

이 코드는 다음과 같이 동작한다.

• 버튼을 클릭할 때마다 countNumber 상태가 1씩 증가한다.
• countNumber 상태가 변경될 때마다 useEffect가 실행되어 콘솔에 로그가 찍힌다.

하지만 실행해 보면 초기 렌더링 시 콘솔에 로그가 두 번 찍히는 현상이 나타난다. 이 원인은 React의 StrictMode에 있다.

 

초기 렌더링 시 결과 창

React StrictMode와 두 번 렌더링 문제

리액트 프로젝트를 처음 생성하면, 일반적으로 아래와 같이 <StrictMode>로 컴포넌트를 감싸준다.

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Header />
    <App />
  </StrictMode>,
)

이 <StrictMode>는 React가 개발 환경에서 컴포넌트의 잠재적 문제를 발견할 수 있도록 도움을 주는 도구이다. 이를 위해 컴포넌트를 일부러 두 번 렌더링하여 예측하지 못한 사이드 이펙트나 메모리 누수 등의 문제를 개발자가 미리 인지할 수 있도록 한다.

즉, 두 번 실행되는 현상은 오류가 아니라 React가 개발자에게 보내는 경고의 의미라고 생각하면 된다!

해결 방법

만약 개발 중 두 번씩 실행되는 것이 불편하다면 개발 중에만 <StrictMode>를 일시적으로 제거하면 된다. 그러나 <StrictMode>가 제공하는 유용한 기능이 많기 때문에 가급적 제거하지 않는 것이 좋다.

프로덕션 환경에서는 <StrictMode>가 동작하지 않기 때문에 걱정하지 않아도 된다.

나처럼 React를 공부하면서 혼란을 겪었다면 이 글을 통해 조금이나마 해소하는 데 도움이 되었기를 바란다..