React] Strict Mode

Strict Mode

production환경에서 일어날 수 있는 오류를 React에서 잡아주기 때문에 사용됩니다.

Strict Mode가 켜져 있는 상태이면, 개발 중에 React는 실제 설정 전에(setup - cleadnup) 한 번 더 실행하게 됩니다.
이는 올바르게 구현되었는지 확인하기 위함이며, 두번 일어났는데, 결괏값이 서로 다르면 해당 코드는 문제가 있다는 것을 파악할 수 있습니다.

 

• 개발 모드에서만 활성화 되기 때문에 production에서는 영향이 없음
• CRA로 프로젝트 생성시 default로 태그가 달려 있음

import React from 'react';

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

 

React.StrictMode로 감쌀 수 있다.

 

 

---

 

 

혹시 next.js를 사용할 경우, next.config.js에서 옵션값으로 설정할 수 있습니다.