React StrictMode란 무엇인가?

React에서 StrictMode는 애플리케이션의 잠재적인 문제를 식별하고 개선하기 위해 사용하는 개발 모드 도구입니다. 이는 UI의 의도치 않은 동작이나 비효율적인 코드, 그리고 React의 향후 버전과의 비호환성 문제를 사전에 파악할 수 있도록 돕습니다.

StrictMode는 실제로 애플리케이션에 런타임 동작에 영향을 미치지 않으며, 개발 환경에서만 활성화됩니다. 배포 환경에서는 제거되기 때문에 성능에 영향을 주지 않습니다.

---

왜 StrictMode를 사용하는가?

React의 점진적인 개선과 최신 버전의 도입을 원활하게 하기 위해서는 기존 코드가 최신 React 관행과 잘 호환되는지 확인해야 합니다. StrictMode를 사용하면 다음과 같은 문제를 쉽게 발견할 수 있습니다:

1. 안전하지 않은 생명주기 메서드 탐지

React는 비추천(deprecated)된 생명주기 메서드를 사용하는 컴포넌트를 감지하고 경고를 표시합니다.
예: componentWillMount, componentWillReceiveProps, componentWillUpdate는 더 이상 권장되지 않습니다.

2. 의도치 않은 부작용 탐지

React 18에서 도입된 Concurrent Rendering과 호환되지 않는 코드를 감지합니다. 이를 위해 StrictMode는 특정 함수를 두 번 실행하여 상태 변경이나 부작용 코드가 의도한 대로 동작하는지 확인합니다.

3. 레거시 API 경고

React가 비추천하거나 더 이상 사용되지 않는 API가 사용된 경우 경고를 제공합니다.
예: findDOMNode나 문자열 기반 ref.

4. 배치되지 않은 상태 업데이트 경고

컴포넌트가 마운트되기 전에 상태를 업데이트하려는 코드를 감지하고 경고합니다. 이는 안정적인 렌더링을 위해 피해야 할 패턴입니다.

---

StrictMode 사용 방법

StrictMode는 React 컴포넌트 트리의 일부 혹은 전체를 감싸서 적용할 수 있습니다. 아래는 사용 예제입니다:

 

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

특정 영역에만 적용하기

전체 애플리케이션이 아닌 특정 컴포넌트에만 StrictMode를 적용하려면 아래와 같이 작성할 수 있습니다:

function Main() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <Content />
      </React.StrictMode>
      <Footer />
    </div>
  );
}

---

React 18에서의 변화: StrictMode와 더블 렌더링

React 18부터는 Concurrent Mode를 지원하기 위해 StrictMode가 다음과 같은 방식으로 동작을 변경했습니다:

• 초기 마운트 시 컴포넌트의 렌더링, 상태 초기화, 그리고 useEffect 클린업이 두 번 실행됩니다.
• 이는 애플리케이션이 비동기 렌더링 환경에서도 안전하게 동작하도록 보장합니다.

예를 들어, 아래와 같은 코드가 있다고 가정해 봅시다:

function Example() {
  React.useEffect(() => {
    console.log('Effect 실행');
    return () => console.log('클린업 실행');
  }, []);
  return <div>Example Component</div>;
}

StrictMode가 활성화된 상태에서는 다음과 같은 로그가 출력됩니다:

 

Effect 실행
클린업 실행
Effect 실행

이는 실제 동작과는 무관하며, 개발 중 부작용을 감지하기 위한 의도적인 동작입니다.

---

StrictMode의 한계

• 런타임 문제를 완전히 방지할 수는 없습니다. 이는 문제를 조기에 발견할 수 있는 도구일 뿐입니다.
• 특정 경고 메시지는 해결이 어렵거나, 외부 라이브러리에서 발생할 수 있습니다. 이 경우 라이브러리 업데이트를 기다려야 할 수도 있습니다.

---

마무리

StrictMode는 React 애플리케이션의 코드 품질을 높이고, 안정성을 보장하는 데 중요한 역할을 합니다. 특히, 향후 React 업데이트에 대비하고 싶다면 StrictMode를 적극적으로 사용하는 것이 좋습니다.

하지만, 개발 과정에서 발생하는 경고 메시지가 혼란을 줄 수 있으니, 필요한 경우 일부 영역에서만 적용하거나, 문제를 우선순위에 따라 해결하는 방식으로 접근하는 것이 효율적입니다.

 

React StrictMode