콘텐츠로 이동

React Strict Mode

개요

개발 중에만 버그를 일찍 잡아주는 도구가 있으면 좋겠죠. <StrictMode>는 바로 그 역할을 해요. 컴포넌트에서 흔히 나는 버그를 개발 중에 미리 찾아내도록 도와주는 컴포넌트예요. 프로덕션에서는 아무 일도 하지 않고, 개발 빌드에서만 추가 검사를 켜요.

핵심 개념

<StrictMode>로 감싼 트리 안에서는 개발 중에 다음 동작이 추가돼요.

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

// 앱 전체를 StrictMode로 감싸면 아래 트리 전체가 검사를 받아요.
const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
  • 컴포넌트를 한 번 더 렌더 — 쓰레기 안 섞는 순수 렌더링 원칙을 어긴 컴포넌트를 찾아요.
  • Effect를 한 번 더 실행(setup+cleanup) — cleanup을 빠뜨린 Effect를 찾아요.
  • ref 콜백을 한 번 더 실행 — ref cleanup이 빠진 경우를 찾아요.
  • 쓸모없어진(deprecated) API 사용 경고

핵심 아이디어는 "순수 함수는 두 번 실행해도 결과가 같다"는 거예요. 예를 들어 props로 받은 배열에 push로 항목을 추가하는 컴포넌트는, 렌더될 때마다 배열에 또 추가되어 화면이 이상해져요. 하지만 그건 재렌더가 여러 번 있어야 눈에 띄죠. Strict Mode는 렌더 함수를 항상 두 번 호출해서, 버그가 있는 컴포넌트는 "Create Story"가 두 번 붙는 걸 바로 보여줘요. Effect도 매번 setup+cleanup을 한 번 더 돌려서, cleanup 없이 연결을 계속 만드는 코드가 있으면 연결이 계속 쌓이는 걸 즉시 드러내요.

주의할 점이 하나 있어요. <StrictMode> 안에서는 개별적으로 검사를 끌 수 없어요. 팀원이 검사 가치를 두고 다투면 합의하거나 <StrictMode> 위치를 트리 아래로 내려야 하죠.

실제 적용(데이터스케쳐스 관점)

캔버스 에디터에서 Strict Mode는 특히 효과적이에요. 캔버스는 협업 소켓, 타이머, DOM 측정 같은 "외부 시스템"과 붙는 Effect가 많아서, cleanup을 빠뜨리면 연결 누수를 개발 중에 못 보고 넘기기 쉬워요. Strict Mode가 setup+cleanup을 강제로 한 번 더 돌려주니, 그런 누수가 커밋되기 전에 화면에서 바로 드러나요.

렌더를 두 번 실행하는 것도 렌더 중에 상태나 props를 변형하는 코드를 개발 단계에서 잡아줘요. 이런 버그는 프로덕션에서 재렌더가 늘 때까지 숨어 있다가 터지는 경우가 많아서, Strict Mode로 미리 보는 게 공식 문서의 권장사항이에요. 다만 검사가 오직 개발에서만 돈다는 점은 팀 내에서 분명히 이해하고 있어야 해요. "Strict Mode에선 괜찮았다"는 프로덕션 동작을 보장하지 않아요. 또 성능은 신경 쓰지 않아도 돼요. 개발 중에 두 번 렌더하는 비용은 버그를 일찍 잡는 이득에 비해 무시할 만하죠.

더 알아보기