[React] StrictMode

create-react-app 설치하여 index.js 파일을 열어보면 아래와 같은 코드가 들어있다.
여기서 Strict mode 가 무엇인지, App 컴포넌트를 왜 감싸고 있는 건지 정리해보고자 한다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

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

📌 Strict Mode

• 개발할 때 엄격한 모드로, 애플리케이션 내의 잠재적인 문제를 해결하기 위한 도구
• React가 자식 컴포넌트를 검사하고 잘못 사용된 부분을 우리에게 알려준다.
• 이런 경고 메시지를 보면서 리액트를 사용하면 어플리케이션의 오류를 해결할 수 있다.
• StrictMode 에서는 props를 허용하지 않는다.

💡 StrictMode는 개발 환경 전용이며, 배포가 되고나면 strict 모드는 저절로 작동하지 않는다는 것을 잊지말자.

🛠️ 개발 전용 동작 활성화

• 불안정한 렌더링으로 인한 버그를 찾기 위해 한 번 더 렌더링한다. (이중 렌더링)

  React는 작성하는 모든 컴포넌트가 순수한 함수라고 가정한다. 즉, 컴포넌트는 동일한 입력이 주어졌을 때 항상 동일한 JSX를 반환해야 한다.
  이 규칙을 위반하면 버그를 유발할 수 있기에 StrictMode 로 개발 환경에서 실수로 작성한 불순한 코드를 찾을 수 있도록 일부 함수(순수 함수만)를 두 번 호출한다.

  📣 순수 함수?
  : 파라미터를 받으며 전역변수를 사용하지 않아 불변성을 띠는 함수

• Effect 클린업이 누락되어 발생한 버그를 찾기 위해 effect를 한 번 더 실행한다.

  일반적으로 React는 컴포넌트가 마운트될 때(화면에 추가될 때) 셋업 코드을 호출하고, 마운트 해제될 때(화면에서 제거될 때) 클린업 코드을 호출합니다.
  Strict Mode가 켜져있으면 개발 환경에서 모든 Effect에 대해 셋업 + 클린업 사이클을 한 번 더 실행한다. 수동으로 잡기 어려운 버그를 발견하는데 도움이 된다고 한다.

• 지원 중단된 API의 사용 여부를 확인한다.

  React는 StrictMode 트리 내의 컴포넌트가 더 이상 지원되지 않는 API 중 하나를 사용하는 경고를 표시한다.
  아래와 같은 API는 오래된 클래스 컴포넌트에서 사용되므로 최신 앱에서는 거의 나타나지 않는다고 한다.
  - 권장되지 않는 findDOMNode
  - UNSAFE_componentWillMount()
  - 레거시 컨텍스트 API (childContextTypes, contextTypes, and getChildContext)
  - 레거시 문자열 ref(this.refs)

🛠️ 사용법

전체 앱에 Strict Mode를 사용하려면 렌더링할 때 루트 컴포넌트를 감싸면 된다.
새로 만든 앱의 경우 전체 앱을 감싸는 것이 좋다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

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

하지만 앱의 일부에도 Strict Mode를 사용할 수 있다.
아래와 같이 사용한다면, Header와 Footer 컴포넌트에서는 Strict Mode 검사가 실행되지 않는다.

import { StrictMode } from 'react';

function App() {
  return (
    <>
      <Header />
      <StrictMode>
        <main>
          <Sidebar />
          <Content />
        </main>
      </StrictMode>
      <Footer />
    </>
  );
}

🔚 마무리

코드를 작성할 때는, 어떻게 사용하는 것인지 왜 쓰는지에 대해 정확하게 알고 있어야 한다고 생각한다. 오늘은 React에서 사용하는 StrictMode 사용을 왜 권고하는지에 대해 알아보았다.
아직은 알아야 할 게 너무 많지만 하나씩 정리하면서 머릿속에 집어넣어야겠다.

📑 참고문서

React 공식문서 내용을 이해하기 쉽도록 정리한 글입니다.
추가로 아래 공식문서의 예제를 보시면서 이해하는 것을 추천드립니다. 감사합니다.
https://ko.legacy.reactjs.org/docs/strict-mode.html
https://react.dev/reference/react/StrictMode