React Strict 모드 이해하기

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

npx create-react-app으로 생성하면 자동으로 설정이 되어있다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

두번 호출 되는 이유

Strictmode는 자동으로 부작용을 찾는 것은 불가능하지만, 의도적으로 두 번 호출하여 예상치 못한 문제가 되는 부분을 발견하도록 하였다.

즉, 두 번 마운트가 일어나더라도 문제 없이 동작해야 버그가 없다는 증거가 되기 때문이다.

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

Header와 Footer 컴포넌트는 Strict 모드 검사가 이루어지지 않는다.

그러나 ComponentOne과 ComponentTwo는 가각의 자식까지 검사가 이루어진다.

검사 항목

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

비활성화 하려면?

react devtools 확장 프로그램에 설정이 포함되어 있음

참고

https://react.dev/reference/react/StrictMode (opens in a new tab)