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>
);
}
이 도구는 아래와 같은 장점이 있습니다.