[매일메일] React의 StrictMode란? (FE.241226)

import { StrictMode } from 'react';

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

React의 StrictMode란?

- 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하기 위해 사용됨.

- 개발자가 안전하고 효율적인 코드를 작성할 수 있도록 도와줌.

 

1. 오래된 라이프사이클 메서드와 비권장 API의 사용을 감지함.

- componentWillMount, componentWillReceiveProps 같은 더이상 사용이 권장되지 않는 메서드를 쓰는 경우 경고를 표시.

   (컴포넌트 생성 직전 호출되어 초기 상태 설정, 컴포넌트가 새로운 props 받았을 때 호출 등 메서드. 데이터 흐름이 복잡해지고 비동기 작업이 완료되지 않은 상태에서 렌더링이 발생하고, 새 React Fiber의 중단 가능 설계와 맞지 않아 Deprecate 됨.)

- 개발자가 최신 React API를 사용해 안정적이고 효율적인 코드를 작성하도록 도움.

 

2. 의도치 않은 Side Effect를 방지함.

- React는 렌더링이 예측 가능하길 기대함.

- StrictMode는 이를 검증하기 위해 useEffect, useState 등 일부 hook이나 메서드를 두 번씩 실행함.(한번더셋업+클린업)

- 동일한 결과가 나오는지 확인해 컴포넌트가 Side Effect를 일으키지 않고 순수하게 동작하는지 검사하기 위함.

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    // return () => connection.disconnect(); <- 이 로직 없으면 방 계속 늘어나기만 함. 안닫힘.
  }, [roomId]);

- 컴포넌트를 채팅에 연결하는 예시. 만약 방을 나갈 때 disconnect하는 로직을 만들지 않으면 계속 열린 방 수가 증가함.

   StrictMode에서는 모든 Effect에 대해 추가 셋업+클린업 사이클을 진행함.

   방이 한 번에 두 개 생기는 걸 보고 문제점을 발견할 수 있음. Effect에서 클린업 사이클이 누락된 것.

 

import React from "react";

function MyComponent() {
  const myRef = (element) => {
    if (element) {
    //setup: 해당 DOM 요소나 컴포넌트가 생성되고 DOM에 추가될 때 실행됨
      console.log("Setup: Element added:", element);
    } else {
    //cleanup: 해당 DOM 요소나 컴포넌트가 DOM에서 제거될 때 실행됨
      console.log("Cleanup: Element removed");
    }
  };

  return (
    <div>
      <div ref={myRef}>Hello</div>
    </div>
  );
}

export default function App() {
  return (
    <React.StrictMode>
      <MyComponent />
    </React.StrictMode>
  );
}

// 콘솔창
Setup: Element added: <div>Hello</div>
Cleanup: Element removed
Setup: Element added: <div>Hello</div>

setup+cleanup 실행 사이클. DOM에 실제로 추가되기 전에 setup+cleanup 한 번 더 실행.

 

목적

- 예기치 않은 동작이나 버그를 사전에 방지함.

- 개발 환경에서 두 번씩 실행했을 때 문제가 발생하지 않으면, 프로덕션에서도 안전하게 실행된다는 신호.

- 개발 모드에서만 두 번 실행되고, 프로덕션에서는 정상적으로 한 번씩만 실행됨.

- Strict Mode는 개발 모드에서만 활성화되므로, 프로덕션 빌드에는 영향 끼치지 않음.

 

 

---

출처

[1] 매일메일. 241226. 리액트의 Strict Mode에 대해서 설명해주세요. 21번. https://maeil-mail.kr

[2] React 공식 docs. <StrictMode> https://ko.react.dev/reference/react/StrictMode

<StrictMode> – React

 직접 체험할 수 있는 예시를 함께 구현해놔서 이해하기 더 좋음!! 읽어보는 것 추천.

[3] gpt에게 React Strict Mode에 대해 묻다