[react 번역] <StrictMode>

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

---

개요

<StrictMode>는 개발 중에 컴포넌트의 일반적인 버그를 조기에 발견할 수 있도록 도와주는 React 컴포넌트입니다. 개발 환경에서만 동작하며, 프로덕션 빌드에는 영향을 주지 않습니다.

<StrictMode>
  <App />
</StrictMode>

---

Reference

<StrictMode>

StrictMode로 감싼 트리 내부에 추가적인 개발 전용 동작과 경고가 활성화됩니다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

동작 (개발 환경 전용)

• 컴포넌트가 불순수하게 렌더링되는 버그를 찾기 위해 한 번 더 렌더링합니다.
• Effect의 cleanup 누락 버그를 찾기 위해 Effect를 한 번 더 실행합니다.
• ref 콜백의 cleanup 누락 버그를 찾기 위해 ref 콜백을 한 번 더 실행합니다.
• 사용 중단(deprecated) API 사용 여부를 검사합니다.

Props

• StrictMode는 props를 받지 않습니다.

Caveats

• StrictMode로 감싼 트리 내부에서는 StrictMode를 해제할 수 없습니다. 전체 앱이 아닌 일부만 감싸는 것도 가능합니다.

---

사용법

전체 앱에 StrictMode 적용하기

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

• 새 프로젝트라면 전체 앱을 StrictMode로 감싸는 것을 권장합니다.
• 프레임워크를 사용할 경우, StrictMode 적용 방법은 해당 문서를 참고하세요.

앱의 일부에만 StrictMode 적용하기

import { StrictMode } from 'react';

function App() {
  return (
    <>
      <Header />
      <StrictMode>
        <main>
          <Sidebar />
          <Content />
        </main>
      </StrictMode>
      <Footer />
    </>
  );
}

• StrictMode로 감싼 부분만 개발 전용 체크가 활성화됩니다.

---

StrictMode가 잡아내는 버그 예시

1. 불순수 렌더링(더블 렌더) 버그

• 컴포넌트가 동일한 입력에 대해 항상 같은 JSX를 반환해야 합니다(순수 함수). StrictMode는 컴포넌트 함수, useState/set 함수, useMemo, useReducer 등에 전달된 함수를 두 번 실행해 불순수 코드를 조기에 발견할 수 있게 합니다.

2. Effect/Ref cleanup 누락 버그

• Effect나 ref 콜백에 cleanup 함수가 없으면 메모리 누수 등 버그가 발생할 수 있습니다. StrictMode는 Effect/ref 콜백을 한 번 더 실행해 cleanup 누락을 조기에 발견할 수 있게 합니다.

3. 사용 중단(deprecated) API 경고

• UNSAFE_ 접두사가 붙은 라이프사이클 메서드 등 구식 API 사용 시 경고를 표시합니다.

---

참고 및 주의사항

• StrictMode의 모든 체크는 개발 환경에서만 동작하며, 프로덕션 빌드에는 영향을 주지 않습니다.
• StrictMode로 감싼 트리 내부에서는 반드시 모든 체크가 적용됩니다. 일부만 해제할 수 없습니다.

---

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