리액트 | StrictMode가 무엇이길래 console.log()가 두 번씩 출력 될까?

버튼을 누르면 숫자가 올라가는 간단한 코드를 작성했다. 언제 페이지 렌더링이 일어나는지 확인하기 위해 console.log("render");를 찍었고, console에 log가 두 번씩 출력되는 것을 확인할 수 있었다.

// ./src/App.js
import { useState } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((prev) => prev + 1);

  console.log("render");

  return (
    <div>
      <h1>Welcome!</h1>
      <h2>{counter}</h2>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

export default App;

console에 log가 두 번씩 찍힌다.

---

왜 두 번씩 찍힐까?

먼저 왜 두 번씩 찍히는지 원인부터 알아보았다. 나 뿐만이 아니라 많은 사람들이 의문을 가졌기 때문에 쉽게 구글링을 통해 알 수 있었다. 원인은 <App /> 컴포넌트를 렌더링하는 render() 함수가 있는 ./src/index.js 파일에서 찾을 수 있었다.

리액트 프로젝트를 생성할 때, create-react-app 커맨드를 이용하여 생성하는데, 이때 자동으로 생성되는 ./src/index.js 파일을 확인해보면 render() 함수 내에 <App /> 컴포넌트가 <React.StrictMode> </React.StrictMode>로 감싸져 있는 것을 볼 수 있다.

// ./src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

이 <React.StrictMode>를 지워주면 console에 log가 한 번만 찍히는 것을 확인할 수 있다. 그래서 React.StrctMode가 무엇인지 공식문서를 통해 간단하게 알아보고자 했다.

---

StrictMode의 역할

StrictMode는 리액트 어플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이다. StrictMode를 사용하면 아래와 같은 개발 전용 동작이 활성화된다. StrictMode는 개발 모드에서만 활성화되는 기능이며, 프로덕션 빌드에는 영향을 미치지 않는다.

• 불완전한 렌더링으로 인한 버그를 찾기 위해 한 번 더 렌더링한다.
• Effect cleanup이 누락되어 발생한 버그를 찾기 위해 Effect를 한 번 더 실행한다.
• 지원 중단된 API의 사용 여부를 확인한다.

StrictMode가 활성화되어 있어 위 코드에서 한 번 더 렌더링되면서 console.log()가 두 번씩 실행된 것이다.

 

StrictMode는 어느 위치에 있느냐에 따라 활성 범위를 제한할 수 있다. 전체 어플리케이션에 대해 활성화하는 경우, render() 함수 내에서 루트 컴포넌트를 <StrictMode>로 감싸면 된다.

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

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

어플리케이션의 일부에서만 StrictMode를 활성화하는 경우, 활성화를 원하는 컴포넌트만을 <StrictMode>로 감싸면 된다.

import { StrictMode } from 'react';

function App() {
  return (
    <>
      <Header />
      <StrictMode>
        <main>
          <Sidebar />
          <Content />
        </main>
      </StrictMode>
      <Footer />
    </>
  );
}

위 코드의 경우 Header와 Footer 컴포넌트에 대해서는 StrictMode가 활성화되지 않으며, Sidebar와 Content 컴포넌트에 대해 StrictMode가 활성화된다.

 

공식문서에 따르면, StrictMode는 아래와 같은 항목들을 확인한다. (React v18.2.0 기준)

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않은 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사
• 재사용 가능한 state의 보장 (Ensuring reusable state)

---

Reference

1. https://ko.legacy.reactjs.org/docs/strict-mode.html#ensuring-reusable-state

Strict 모드 – React

2. https://react-ko.dev/reference/react/StrictMode

<StrictMode> – React

---

React를 이제 배우기 시작한 입장이라 공식문서의 모든 내용을 이해하는 건 불가능했다. 하지만 프로젝트를 진행한다면 StrictMode는 매우 유용하게 사용될 것이라는 것은 알 수 있었다.

공부하는 입장에서는 두 번씩 렌더링이 진행되어 불편하다면 StrictMode를 지우고 실행하면 될 것 같다.