[React] StrictMode란?

* 학습을 목적으로 작성된 글입니다
* 각종 피드백은 언제든지 감사히 받겠습니다 😀

---

React 강의를 듣던 중 StrictMode를 삭제하고 프로젝트를 진행하는 것을 보며, StrictMode는 무엇이고 어떤 역할을 하며 개발에 어떤 영향을 미치는지 알아보고자 한다.

---

◾ StrictMode란?

초기 리액트 프로젝트 세팅 시 App 컴포넌트가 <React.StrictMode> 태그로 감싸져 있는 모습을 볼 수 있다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

StrictMode는 <StrictMode> 컴포넌트 내부의 모든 컴포넌트 트리에 대해 개발 전용 검사를 활성화한다. 이러한 검사는 개발 프로세스 초기에 버그를 찾는 데 도움이 된다.

 

즉, "개발 모드일 때 잠재적인 버그를 찾을 수 있는 모드" 인 것이다.

 

◾  이러한 StrictMode는 ...

  ◽ props가 허용되지 않는다.

  ◽ 컴포넌트를 unmount 시켰다가 다시 한 번 remount 시킨다.

 

◾  이중 렌더링 된다고?

React는 작성하는 모든 컴포넌트가 순수 함수라고 가정한다.

이게 무슨 말이냐 함은, 컴포넌트가 같은 입력에 대해 같은 JSX를 반환한다- 는 뜻!

 

그래서 StrictMode 적용 시 이러한 순수함수여야 하는 것들이 두 번씩 호출되는 것을 확인할 수 있다.

 

◾  StrictMode 제거하기

결론적으로 StrictMode는 이중 렌더링을 통해 잠재적 버그를 감지하며, 개발 전용이기에 프로덕션 빌드에는 영향을 미치지 않는다.

이러한 side effect 예방, 코드 검사 등이 필요하지 않고 당장의 이슈만 해결하고 싶다면 (두 번씩 찍히는 게 귀찮다면) 간단히 삭제해주면 된다.

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

---

Reference

 

<StrictMode> - react.dev
React useEffect가 두 번 실행되는 이유, Strictmode란?