React.StrictMode( Strict 모드 )

React.StrictMode( Strict 모드 )

 

create-react-app 설치 후 index.js 를 살펴 보면

<React.StrictMode> 라는 것을 볼 수 있다.

처음엔 이게 먼가 싶었는데... 딱히 머 실행시 문제될 거는 없었기에 신경을 안쓰고 있었는데...

테스트시 devtools 에 콘솔 로그 값이 두번씩 찍히는 것을 발견 할 수 있었다.

검색해서 찾아봤더니 React.StrictMode 라는 것 때문에 그런 현상이 나타나는 것이라는....

 

해서 공식 홈에 해당 부분을 찾아 봤더니...아래와 같은 내용들이 있었다.

 

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구. 

Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화.

 

 

주의

Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.

애플리케이션 내 어디서든지 아래와 같이 strict 모드를 활성화할 수 있습니다.

import React from 'react';

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

위의 예시에서, Header와 Footer 컴포넌트는 Strict 모드 검사가 이루어지지 않습니다.

하지만, ComponentOne과 ComponentTwo는 각각의 자손까지 검사가 이루어집니다.

StrictMode는 아래와 같은 부분에서 도움이 됩니다.

 

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사

 

 

결론은 문제시 되는 부분을 개발시에 사전에 방지해주는 목적이 크고 빌드시엔 아무런 영향을 안준다니 신경쓰지 않아도 된다는 결론..

아래는 해당 내용이 기재된 공식 홈의 내용이다.

 

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

Strict 모드 – React