개요

프로젝트를 진행하다가 API 요청이 두번씩 간다던가, socket emit이 두 번 보내지는 경우를 겪은 적이 많다. console.log()가 두 번씩 찍히는 경험도 많다. 이는 index.tsx 파일의 React.StrictMode가 동작하기 때문인데 그동안 단순히 주석 처리를 하고 strict 모드를 비활성화한 상태로 이용하곤 했다. 이를 지우고 프로젝트를 실행해도 별다른 문제는 생기지 않는다.

그렇다면 StrictMode는 왜 있는 것이며, 이렇게 지우고 사용해도 괜찮은 것일까.

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

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

Strict 모드

개념

우선 Strict Mode에 대해 정리해보자.

리액트 공식 문서에 따르면, “StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다. Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않는다.”

StrictMode는 index.tsx 외에도 프로젝트 내 어디서든 해당 모드의 활성화가 가능하다.

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
        <div>
				**<React.StrictMode>**
          <ComponentOne />
          <ComponentTwo />
				**</React.StrictMode>**
        </div>
      <Footer />
    </div>
  );
}

위의 예에서는 ComponentOne과 ComponentTwo의 각각의 자손까지 Strict 모드 검사가 이루어진다고 한다. JavaScript에도 비슷한게 있다. 코드 파일 상단에 “use strict”를 써 놓으면 JS를 실행할 때 조금 더 엄격한 코드 검사가 이루어진다.

Strict 모드가 무언가 검사하기 위한 목적으로 사용되는 도구인지는 알겠다. 그럼 어떤 부분에서 실질적인 도움이 될까?

Strict 모드의 검사항목

공식문서에서 Strict모드의 현재 총 6가지 검사 항목을 안내한다. 그 중 세가지에 대해 알아봤다. (나머지 세가지 항목은 알고 있지 않아도 될 것 같아서 ..)

나머지 3가지 항목

1. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견

deprecated된 메서드의 사용을 막아준다. 예로 componentWillMount, componentWillReceiveProps, componentWillUpdate와 같은 메서드를 사용자가 사용할 경우 경고 메세지를 띄워줄 수 있다.

Untitled

특히 서드 파티 라이브러리를 사용할 때 해당 생명주기 함수들이 사용되지 않는다고 장담하기 어렵다. 또한, Strict 모드를 쓴다면 리액트가 향후 Release될 때 concurrent 렌더링의 이점을 얻을 수 있다.