[Strict Mode] 리액트의 StrictMode란?

728x90

React의 StrictMode란? 

React에는 <StrictMode>라는 컴포넌트가 있습니다. 특히 create-react-app으로 생성한 프로젝트에서는 기본적으로 루트에 사용되고 있는데요, "StrictMode는 개발 모드에서만 작동한다"는 것 외에 명확히 알고 있는 사람은 의외로 많지 않습니다.

StrictMode는 단순한 개발 도구를 넘어, 리액트 컴포넌트의 동작을 더 엄격하게 감시하고, 잠재적인 문제를 조기에 감지할 수 있게 도와주는 중요한 역할을 합니다. 특히 비동기 렌더링 환경이나 React 18의 동시성 모드와 관련된 이슈를 디버깅할 때, StrictMode는 필수적인 점검 도구로 기능합니다. 예를 들어, 부작용(side effect)을 유발할 수 있는 코드를 감지하기 위해 컴포넌트를 의도적으로 두 번 마운트하거나, 더 이상 권장되지 않는 생명주기 메서드를 사용하는 경우 경고를 출력하는 등의 방식으로 작동합니다.

이러한 기능 덕분에 개발자는 코드가 실제 서비스 환경에서 어떤 문제가 발생할 수 있는지를 미리 시뮬레이션하고 수정할 수 있게 되며, 장기적으로 안정적인 애플리케이션을 만들 수 있습니다.

 

---

 

1.  StrictMode란?

StrictMode는 리액트가 제공하는 개발 모드 전용 도구로, 애플리케이션 내의 잠재적인 문제를 미리 감지할 수 있도록 도와줍니다. 이는 성능 최적화, 안정성 확보, 향후 리액트 버전과의 호환성을 위해 매우 중요한 역할을 합니다.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

StrictMode는 컴포넌트처럼 사용되며, 보통 루트 렌더링 시 App 컴포넌트를 감싸는 형태로 사용합니다.

특징

• 런타임에는 영향을 주지 않음 (프로덕션 빌드에서는 완전히 제거됨)
• 자식 컴포넌트에게만 영향을 미침
• 의도적으로 일부 함수나 생명주기를 두 번 호출하여 이상 여부 감지
• Deprecated API 사용 감지, 부작용 유발 코드 탐지, 의심스러운 패턴 경고

 

---

2.  어떤 문제를 감지하는가?

a.  부적절한 Side Effect

React는 렌더링 중 side effect가 존재하면 버그를 유발할 수 있다고 판단합니다. 그래서 useEffect, useLayoutEffect 등에서 의존성 배열을 잘못 관리하거나, 부작용이 있는 코드를 감지하기 위해 컴포넌트를 두 번 마운트합니다.

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

StrictMode에서는 콘솔 출력이 두 번 일어납니다. 실제 프로덕션에서는 한 번만 발생하지만, 개발자가 마운트/언마운트 시 발생하는 문제를 조기에 발견할 수 있도록 돕는 것입니다.

b.  레거시 생명주기 메서드 사용 감지

다음 생명주기 메서드는 StrictMode에서 경고를 발생시킵니다.

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

이 메서드들은 향후 React에서 제거될 예정이므로, StrictMode는 이들을 감지해 교체를 유도합니다.

 

c.  의심스러운 Context API 사용

React Context를 사용할 때, 변화를 감지하지 못하는 구조로 작성하면 렌더링 버그가 발생할 수 있습니다. StrictMode는 이런 패턴을 탐지하고 경고합니다.

d.  자동 배치(Auto-batching) 및 병렬 렌더링(Concurrent Rendering) 테스트

React 18 이후, 동시성 모드(concurrent mode)가 도입되면서 StrictMode는 컴포넌트를 의도적으로 중단(suspend)하고 재시작하는 테스트를 진행합니다. 이로 인해 useEffect나 useState의 동작 타이밍에 혼란을 줄 수 있는데, 이는 React의 새로운 렌더링 전략과의 호환성 여부를 점검하기 위한 것입니다.

 

---

 

3.  StrictMode의 오해

"렌더링이 두 번 일어나니 비효율적인 것 아닌가요?"

StrictMode의 렌더링 두 번은 오직 개발 환경에서만 발생하며, 이는 문제를 조기에 발견하기 위한 목적입니다. 프로덕션 빌드에서는 StrictMode는 렌더링 결과에 어떤 영향도 미치지 않으며, 빌드 시 제거됩니다.

 

---

 

4.  실무에서는 어떻게 활용할까?

• 모든 앱에 기본적으로 사용하는 것이 권장됩니다.
• 점진적 도입 가능 : 코드베이스의 특정 부분에만 적용해 점검할 수 있습니다.
• 문제 발생 시 불필요하게 StrictMode를 제거하지 말고, 경고의 원인을 파악해 수정하는 습관이 중요

 

---

5.  마무리

• StrictMode는 개발 중 버그를 조기에 발견하도록 돕는 도구입니다.
• 프로덕션에는 영향을 주지 않으며, 잠재적인 문제점 감지와 React 향후 업데이트에 대비하는 기능을 합니다.
• 주요 역할은 부작용 탐지, 레거시 API 경고, Context API 감시, React 18의 동시성 기능 테스트입니다.
• 실무에서는 경고를 피하기 위해 엄격한 코드 작성 습관을 기를 수 있도록 도와주는 좋은 학습 도구입니다.

함께 보면 좋은 자료

외부 사이트 :

• React 공식 문서 - Strict Mode

 

---