React.StrictMode는 뭔가요?

Question

`create-react-app`으로 리액트 애플리케이션을 생성했습니다. 그런데 index.js 파일에 보면 아래와 같이 `App` 컴포넌트를 `React.StrictMode`가 감싸고 있습니다. `React.StrictMode`는 어떤 역할을 하는 건가요? ```tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); ```

soaple · Accepted Answer

Strict Mode는 **개발 모드일 때 잠재적인 버그를 찾을 수 있게 해주는 모드**라고 생각하면 됩니다. Strict Mode와 관련된 자세한 설명은 아래 링크를 참고하기 바랍니다. https://react.dev/reference/react/StrictMode 그리고 현재 리액트 버전18에서는 Strict Mode의 동작이 변경되었는데, 변경된 Strict Mode의 동작과 관련해서는 아래 링크를 참고하기 바랍니다. https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors 위 링크에 나와있는 설명에서 핵심은 > *"React would unmount and remount trees using the same component state as before."* 라는 부분입니다. 즉, **개발 모드에서 Strict Mode를 사용하게 되면, 컴포넌트를 unmount 시켰다가 다시 한 번 remount 시키게 된다는 것**입니다. 때문에 만약 클래스 컴포넌트의 라이프사이클 함수들을 사용했다면, `componentDidMount()`가 한 번 호출 된 다음 `componentWillUnmount()`가 호출 되고, 이후 다시 `componentDidMount()`가 호출 됩니다. 그리고 함수 컴포넌트의 `useEffect()` 훅도 동일하게 작동하겠죠. 프로덕션 배포를 하게되면 Strict Mode는 무시되기 때문에 정상적으로 작동합니다. 만약 개발 모드에서 Strict Mode가 아닌 상태로 테스트를 해보려면, `index.js` 파일에서 `React.StrictMode`로 감싸진 부분을 삭제하고 실행하면 됩니다. ```jsx const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); ```