Strict Mode

StrictMode

StrictMode는 React 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하는 데 도움을 주는 개발도구이며, 프로덕션 빌드에서는 아무 영향을 미치지 않고, 오직 개발 환경에서만 작동한다.

비권장 API 및 오래된 라이프사이클 메서드 감지

• React의 최신 버전에서는 더 이상 사용되지 않거나 비권장 상태인 API를 감지할 수 있다.
  • 예: componentWillMount, componentWillReceiveProps, componentWillUpdate와 같은 오래된 라이프사이클 메소드
• 이러한 메소드가 포함된 코드는 콘솔 경고를 통해 개발자에게 알림을 주고, 최신 React API로 전환하도록 유도한다.

 

의도치 않은 부수효과 감지

• React는 컴포넌트가 예측 가능한 방식으로 동작하기를 기대하는데, 이를 검증하기 위해 StrictMode는 렌더링과 훅같은 특정 코드를 두 번 실행한다.
• useEffect, useState 등 일부 React 메서드들이 테스트 목적으로 한 번 더 실행되며, 두 번 실행해도 동일한 결과가 나와야 하는데, 이 과정에서 사이드 이펙트가 발생하면 개발자가 이를 확인하고 수정할 수 있다.

 

StrictMode가 감지하는 문제

• 비동기 코드 문제: 예를 들어, 비동기 작업에서 의도치 않게 데이터가 중복 요청될 수 있는 상황을 감지한다.
• React 계층 구조의 문제: 잘못된 props 전달, key 설정 오류 등을 감지한다.
• 기본값 의존성 문제: 의존성 배열이 잘못 설정된 useEffect 훅 등을 감지한다.

 

StrictMode 사용 방법

StrictMode는 컴포넌트 트리의 일부 또는 전체를 감싸는 방식으로 적용되며, 자동 프로젝트 생성 명령어로 만들 시 기본적으로 적용되어 있다. 

import React from "react";

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

 

 

StrictMode에서 두 번 실행되는 동작은 개발 모드에서만 나타나며, 프로덕션 환경에서는 한 번만 실행되므로 성능에 영향을 미치지 않는다.

 

StrictMode의 장점

1. 잠재적인 버그를 조기에 감지하고 수정
2. React의 최신 규칙과 권장 사항 준수
3. 프로덕션 환경에서도 안전하게 동작할 수 있는 코드를 작성하는 데 도움