🧪 22. React.StrictMode — 왜 개발 환경에서만 쓰고, 정확히 무슨 일을 하는 걸까?

React 프로젝트를 시작하면 기본적으로 index.tsx에 아래와 같은 코드가 들어간다.

<React.StrictMode>
  <App />
</React.StrictMode>

처음에는 그냥 "개발용이겠지" 하고 지나치기 쉬운데,
알고 보면 React.StrictMode는 꽤 중요한 역할을 한다.
이번 글에서는 StrictMode가 정확히 무슨 일을 하는지,
언제 켜고 꺼야 하는지를 정리해봤다.

---

✅ React.StrictMode란?

개발 환경에서만 작동하는 개발자 도구
React 앱에서 잠재적인 문제를 조기에 탐지할 수 있도록 도와준다.

✅ 중요한 특징

• 렌더링을 두 번 실행해서 이상 동작을 미리 파악함
• 사이드 이펙트나 의도치 않은 렌더링 흐름을 잡아냄
• DOM에는 영향을 주지 않음

---

🔁 어떤 일들이 발생하나?

1️⃣ 함수 컴포넌트 렌더링 2번 실행

function Test() {
  console.log('렌더링');
  return <div>테스트</div>;
}

StrictMode에서는 console.log가 2번 실행됨
→ React가 "이 함수가 순수하게 동작하는지" 검증하기 위해 의도적으로 두 번 렌더링함

---

2️⃣ useEffect와 useLayoutEffect clean-up 테스트

useEffect(() => {
  console.log('이펙트 실행');

  return () => {
    console.log('정리 함수 실행');
  };
}, []);

StrictMode에서는 마운트 → 언마운트 → 다시 마운트
→ 사이드 이펙트 정리(clean-up)가 잘 되는지 검증하는 목적

---

3️⃣ Deprecated API 경고

• class component에서 legacy lifecycle(componentWillMount, 등) 사용 시 경고
• 잘못된 ref, unsafe context 사용 시도에 대한 경고

✅ 이를 통해 React의 미래 버전에 문제가 될 요소를 미리 찾아낼 수 있음

---

❌ production 환경에서는 제거된다

StrictMode는 개발 환경에서만 작동하고
실제 사용자에게는 영향을 주지 않는다.

✅ 그래서 걱정 없이 사용해도 된다.
❌ 단, StrictMode에서 발생한 렌더링 두 번 현상은 실제 배포에선 발생하지 않는다.

---

💡 왜 두 번 렌더링 되는지 직접 확인해보자

function Demo() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('🟡 useEffect');
    return () => {
      console.log('🔴 clean-up');
    };
  }, []);

  return <button onClick={() => setCount(count + 1)}>+1</button>;
}

StrictMode ON
콘솔 출력:

🟡 useEffect  
🔴 clean-up  
🟡 useEffect  

이걸 모르고 있다면,
"왜 컴포넌트가 두 번 렌더링되지?"
"왜 useEffect가 두 번 실행되지?"
같은 혼란에 빠지게 된다.

---

📝 내가 느낀 점

처음에는 그냥 CRA(create-react-app)에서 자동으로 쓰니까 그런가보다 했는데,
진짜 사이드 이펙트가 의도치 않게 DOM을 건드릴 때,
StrictMode가 그걸 미리 알려주는 느낌이 들었다.

덕분에 상태 관리, useEffect 설계할 때 "이게 순수하게 작동할까?"
한 번 더 점검하게 되는 습관이 생겼다.

---

🔍 "StrictMode는 테스트를 위한 가혹한 선생님이다.
지금은 귀찮아도, 미래엔 안정성으로 돌아온다."