[React] Strict Mode 완전 정복 - 사이드이펙트, 더블 렌더링, Deprecated 감지까지

🔷 들어가며
React를 사용하다 보면 <React.StrictMode>라는 컴포넌트를 본 적이 있을 것이다. 보통 index.js 파일에서 루트 컴포넌트를 감쌀 때 사용한다. 하지만 정확히 어떤 역할을 하는지, 왜 사용하는지에 대해선 모호한 경우가 많다.

이번 글에서는 StrictMode가 실제로 어떤 일을 하는지, React 18에서 어떤 변화가 있었는지, 그리고 우리가 코드에서 어떻게 대응해야 하는지까지 정리해보려한다.

 

---

 

✅ StrictMode란?

StrictMode는 React에서 잠재적인 문제를 사전에 감지할 수 있도록 도와주는 개발용 유틸리티 컴포넌트이다.
- 개발 모드에서만 동작
- 실제 UI에는 아무 영향도 주지 않음
- 앱 전체 또는 일부분에만 적용 가능

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

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

 

 

---

 

🔍 StrictMode가 하는 일
1. Deprecated API 감지
React에서 더 이상 사용이 권장되지 않는 생명주기 메서드나 레거시 API 사용을 감지한다.
- componentWillMount, componentWillReceiveProps, componentWillUpdate 등
- tring ref 방식 (ref="myRef") 사용
- 레거시 Context API (contextTypes, childContextTypes)

2. 부작용 감지 (Side Effect Detection)
React 18부터는 마운트와 언마운트를 의도적으로 반복하여 컴포넌트의 사이드 이펙트 작동을 확인한다.
예를 들어 다음 코드의 useEffect는 StrictMode 하에서 두 번 실행된다.

useEffect(() => {
  console.log('마운트');
  return () => console.log('언마운트');
}, []);

 

출력

마운트
언마운트
마운트

 

이렇게 일부러 다시 마운트해보면서 정상적으로 cleanup이 되는지 확인한다.

3. 상태 불변성 체크 및 이상 동작 감지
상태를 직접 변경하거나, 부적절한 방식으로 상태를 조작하면 경고를 발생시킨다.
리액트의 "퓨어" 철학을 깨지 않도록 도와준다.

 

 

---

⚠️ React 18 이후 StrictMode 변화
React 18에서 Concurrent Rendering이 기본이 되면서 StrictMode도 다음과 같은 변화가 있었다.
- useEffect, useState, useMemo 등 훅의 초기화/clean-up을 여러 번 수행 (더블 호출)
- 이유는: 비동기 렌더링 시 예상치 못한 동작을 미리 감지하기 위해서

💡 주의할 점
이중 실행은 프로덕션에서는 일어나지 않지만, 개발 중에는 항상 발생하므로 이에 맞게 퓨어하고 idempotent한 로직을 작성해야 한다.

 

 

---

 

🧪 실제 적용 팁
- 외부 API 호출이나 DB 트랜잭션 같은 부작용 로직은 useEffect 내부에서 분리하고, 정확한 cleanup 함수를 작성하는 것이 좋다.
- 컴포넌트 내부에 불필요한 상태 변경이나 순수하지 않은 계산식이 없는지 확인해 볼 것.

- StrictMode에서 문제가 없는 코드는 미래의 React 업데이트에 안전하다.