React.StrictMode란?

React.StrictMode에 대해서 궁금증이 생긴이유는 토스 결제기능을 구현하던 중 로컬에서 계속 서버통신이 2번씩 돌아가고있는 이슈를 발견하여 이부분을 해결하기위해서 정리를 해보았다.

React.StrictMode는 React 애플리케이션에서 개발 환경에서만 활성화되는 도구로, 잠재적인 문제를 식별하고 코드 품질을 개선하는 데 도움을 줍니다. 이 기능은 불필요한 사이드 이펙트나 잘못된 상태 처리 등을 체크하여 개발자가 이를 사전에 발견하고 수정할 수 있도록 돕습니다.

주요 특징:

• 개발 환경에서만 활성화: React.StrictMode는 로컬 개발 모드에서만 동작하며, 프로덕션 빌드에는 영향을 미치지 않는다.
• 컴포넌트의 잠재적인 문제를 발견: 컴포넌트가 의도하지 않게 두 번 렌더링되도록 하여, 사이드 이펙트나 상태 처리 문제를 미리 감지할 수 있도록 돕는다.
• 성능에 영향 없음: 실제 애플리케이션 동작에는 영향을 주지 않으며, 서버 통신 같은 로직에도 영향을 주지 않습니다. 오직 개발 중에만 코드의 문제를 발견하는 데 도움이 된다.

// React.StrictMode 형식
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

React.StrictMode는 개발 모드에서만 유용하게 작동하는 도구로, 코드에서 발생할 수 있는 문제들을 사전에 감지하여 버그를 미리 찾고 수정하는 데 도움을 줍니다. 그러나 이는 프로덕션 빌드에서는 아무런 영향을 미치지 않으며, 실제 서버에서 애플리케이션의 동작에는 영향을 주지 않는다.