[React] useEffect 연속 2번 동작 원인 및 해결

 

개발을 하다보니 렌더링 한번만 되어야하는데 2번이 되어서 예상치 못한 결과를 얻는 경우가 있다. 

const PongGame = () => {
  useEffect(() => {
    console.log("렌더링");
  }, []);
  return <div></div>;
};

 

렌더링이 다시 발생하는 이유에는 상위 컴포넌트에서 렌더링이 발생했기 때문일 수 도 있지만 상위 컴포넌트가 없는 경우에도 발생하는 경우가 있다. 

 

그럼 문제 원인은 strict mode 때문일 것이다. strict mode를 사용하면 버그를 잡기 위해서 렌더링을 2번을 발생 시킨다.

첫 번째 렌더링은 순수하게 side effect가 없도록 체크하고, 두 번째 렌더링은 실제로 컴포넌트가 렌더링되는 것이다.

useEffect 같이 렌더링 주기에 민감한 hook을 사용할 때면 strict mode는 렌더링 주기를 우리가 예상하기 어렵게 만든다.

 

따라서 이럴 때는 아래 처럼 strict mode를 끄고 개발을 해야할 수 있다.

ReactDOM.createRoot(document.getElementById('root')!).render(
  <RecoilRoot>
    {/* <React.StrictMode> */}
        <App />
    {/* </React.StrictMode> */}
  </RecoilRoot>,
);

 

그러면 개발 동안 strict mode를 끄고 개발을 해도 상관은 없는 것일까? 고민을 할 수 있다. 왜냐면 vite든 CRA에서도 strict mode를 기본으로 세팅을 하기 때문이다.

 

일단 배포를 할 때면 strict mode는 제거를 하고 배포하기 때문에 없는 상태에서 잘 돌아간다면 상관은 없겠지만 개발 중에 버그 발견이나 성능 향상 부분에서는 손해가 있을 수 있을 것 같다.