[React] Strict mode

• Strict mode란?
  • 애플리케이션 내 잠재적인 문제를 알아내기 위한 도구. Fragment와 같이 UI를 렌더링하지 않으며, 하위 컴포넌트에 대한 부가적인 검사와 경고를 활성화함.
  • 스트릭트 모드는 개발 모드에서만 활성화되기 때문에 프로덕션 빌드에는 영향을 끼치지 않음.
  • 다음과 같은 부분에서 도움이 됨.
    1. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
    2. 레거시 문자열 ref에 대한 경고
    3. 권장되지 않는 findDOMNode 사용에 대한 경고
    4. 예상치 못한 부작용 검사
    5. 레거시 context API 검사
    6. Ensuring reusable state
• 예시

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

  • 위 예시에서 Header와 Footer 컴포넌트에는 스트릭트 모드 검사가 이루어지지 않음. 하지만 ComponentOne과 ComponentTow는 각각의 하위 컴포넌트까지 검사가 이루어짐.

Reference

Strict 모드 – React