[React] 렌더링이 두 번 발생하는 건에 대하여 (StrictMode)

앞서 react-beautiful-dnd 라이브러리 사용 중에 React 18의 StrictMode 미지원으로 인해 발생한 이슈에 대해 정리한 글이 있다.

👉🏻 Issue with React 18

이어서, StrictMode에 대해서도 궁금증이 있었기에 간단하게 정리해본다.

React 18을 사용하여 프로젝트를 진행하다 보면 컴포넌트가 두 번 렌더링 되는 경우를 경험했을 것이다. 컴포넌트 안에 작성한 console.log가 두 번 출력된다. 또, useEffect훅의 의존성 배열을 공백으로 두면 컴포넌트가 마운트 되는 순간 한 번 실행되는데, 훅 안에 작성한 console.log가 두 번 출력되었다.

function App() {
  useEffect(() => {
    console.log('마운트');
    return () => console.log('언마운트');
  }, []);

  return (
    <KanbanProvider>
      <RouterProvider router={router} />
    </KanbanProvider>
  );
}

Why?

이는 React.StrictMode로 인해 발생하는 문제이다. 정확히는 React 18 이상 버전부터 추가된 StrictMode 때문이다. 아마 CRA로 프로젝트를 구성했다면 index.js 파일에 아래처럼 자동으로 React.StrictMode가 추가되어 있을 것이다.

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

StrictMode란?

StrictMode란 애플리케이션의 잠재적인 문제를 알아내기 위한 도구란다. 문제를 빠르게 식별하고 경고 메시지를 출력하기 위해 컴포넌트를 두 번 렌더링한다. 안전하지 않은 ✌🏻something✌🏻에 대한 경고라고 생각하면 되겠다. 아, 개발 모드에서만 활성화된다!

React가 자식 컴포넌트를 검사하고 잘못 사용된 부분을 우리에게 알려주는 것이다. 그 ✌🏻something✌🏻이 뭔데? React 공식 문서에는 아래 6가지 유형들에 대해 검사한다고 나와 있다.

1. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
2. 레거시 문자열 ref 사용에 대한 경고
3. 권장되지 않는 findDOMNode 사용에 대한 경고
4. 예상치 못한 부작용 검사
5. 레거시 contextAPI 검사
6. Ensuring reusable state