230915 개발일지 TIL - React에서 StrictMode

React에서 StrictMode

StrictMode란?
<React.StrictMode>는 React 애플리케이션의 부분적인 트리를 엄격 모드로 실행할 수 있게 해주는 도구이다. 이 모드는 개발 중에만 활성화되며, 잠재적인 문제를 찾아내기 위해 컴포넌트들에 대한 추가적인 검사와 경고를 수행한다.

사용 하는 곳
<React.StrictMode>는 주로 애플리케이션의 최상위 레벨에서 사용한다. 예를 들어, ReactDOM.render() 함수 내부에서 다음과 같이 위치시킬 수 있다.

import React from 'react';
import ReactDOM from 'react-dom';
import { Reset } from 'styled-reset';
import { GlobalStyle } from './styles/GlobalStyle';
import { Provider as JotaiProvider } from 'jotai';

ReactDOM.render(
  <React.StrictMode>
    <Reset />
    <GlobalStyle />
    <JotaiProvider>
      <App />
    </JotaiProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

컴포넌트와 그 하위 컴포넌트들은 <React.StrictMode>로 감싸져 있어 엄격 모드에서 실행된다.

필요한 이유
엄격 모드를 사용하면 안전하지 않은 생명주기 메서드의 사용, 예상치 못한 부작용 등과 같은 잠재적인 문제점을 발견할 수 있다. 이러한 검사와 경고들은 개발 중에만 활성화되므로 프로덕션 빌드에 영향을 주지 않는다.