[React] Strict Mode란?

Strict Mode란

개발 환경에서만 적용되는 모드로, 잠재적인 버그나 비권장하는 코드의 사용을 감지하여, 이를 미리 알려주는 역할을 한다.

불필요하게 중복되어 실행되는 컴포넌트 렌더링이라던가, 불안정하면서 권장되지 않는 API의 사용이 예시이다.

어디에 설정되어 있는가

보통은 tsconfig 파일 혹은 entry-point가 되는 컴포넌트 파일에 감싸져서 설정이 되어있다.

{
  "compilerOptions": {
    "strict": true,
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "src/types/next-auth.d.ts",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"]
}

혹은

<React.StrictMode>
  <App />
</React.StrictMode>

이를 통해 부주의한 side effect 나 잘못된 로직을 사전에 감지하여 안정성과 최적화를 유도한다.

단, Strict mode를 사용한다고 해서 성능이 떨어지는 것은 아니다.

단지 "이게 나중에 문제가 될 수 있는데, 괜찮아?"를 알려주는 개발 단계에서의 모드일 뿐이다.