React Strict 모드 이해하기

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

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

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

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 검사
• 재사용 가능한 상태 보장

---

참고

https://react.dev/reference/react/StrictMode