React의 Strict Mode

React에는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구가 있습니다.

바로 StrictMode입니다.
개발 모드에서 앱 내의 잠재적인 버그를 알아내기 위해서 컴포넌트를 두 번 렌더해줍니다.
당연하게도, 개발 모드에서만 활성되기 때문에 프로덕션 빌드(배포)에는 영향을 끼치지 않습니다.

React나 Next.js 앱을 시작하면 next.config.js 파일이 있는 것을 확인할 수 있습니다.
해당 파일에 들어가보면

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

이렇게 작성되어 있는 것을 확인할 수 있는데요.
여기에서 strictmode가 true이면 컴포넌트를 두 번 렌더해주게 됩니다.
이 기능은 React 18 버전부터 지원됩니다. (17버전일 경우 strictmode true 여도 활성화되지 않습니다.)

만약 config.js에서 설정해주지 않아도 react에서 StrictMode를 import 하여 컴포넌트르 감싸주어 활성화 해줄 수 있습니다.

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

이 도구는 아래와 같은 장점이 있습니다.

• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않은 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사

참고: https://ko.reactjs.org/docs/strict-mode.html