[React] React.StrictMode: 깊이 있고 알찬 완벽 가이드 🚀

React.StrictMode 톺아보기! 🚀

React.StrictMode는 React 애플리케이션 개발 중 잠재적인 문제를 감지하고 개발 경험을 개선하기 위한 도구입니다. 이는 UI를 더 안전하고 예측 가능하게 만들어주는 “개발 환경 전용 도구”로, 생산 환경에서는 작동하지 않습니다.

 

React.StrictMode가 왜 중요한지, 어떻게 작동하는지, 그리고 실무에서 마주칠 수 있는 사용법과 주의점을 하나씩 살펴볼까요?

---

React.StrictMode란? 🤔

React.StrictMode는 React에서 제공하는 내장 컴포넌트로, 개발 중 애플리케이션에서 잠재적인 문제를 감지하거나 경고를 출력하는 역할을 합니다. 이를 통해 더 안전하고 안정적인 코드를 작성할 수 있도록 돕죠.

 

주요 역할

1. Deprecated(폐기 예정) 메서드 경고
   • React의 오래된 라이프사이클 메서드(예: componentWillMount, componentWillUpdate, componentWillReceiveProps) 사용 시 경고를 출력합니다.
2. 의심스러운 사이드 이펙트 감지
   • 리액트에서의 사이드 이펙트는 의도치 않은 동작을 유발할 수 있습니다. useEffect 훅에서의 잘못된 사용이나, 렌더링 도중 상태를 변경하는 코드를 감지합니다.
3. 배치 업데이트 검사
   • 상태 업데이트가 올바르게 병합되고 있는지 확인합니다.
4. 불필요한 리렌더링 감지
   • React.StrictMode는 컴포넌트를 의도적으로 두 번 렌더링해 불필요한 리렌더링이나 문제를 발견할 수 있게 도와줍니다.
5. 타입 안정성 및 코드 품질 개선
   • React.StrictMode와 TypeScript 또는 PropTypes를 결합하면 타입 안전성을 더욱 강화할 수 있습니다.

---

사용법: 어떻게 적용할까? 📚

React.StrictMode는 루트 수준 또는 특정 컴포넌트에 적용할 수 있습니다. <React.StrictMode> 태그로 감싸면 됩니다.

 

루트 수준에서 적용하기

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

 

특정 컴포넌트에만 적용하기

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

---

React.StrictMode가 감지하는 문제들 ⚠️

1. Legacy 라이프사이클 메서드

React의 오래된 라이프사이클 메서드가 감지되면 경고를 출력합니다. 예를 들어, 아래 메서드는 StrictMode에서 경고를 발생시킵니다:

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

대안으로는 최신 라이프사이클 메서드인 getDerivedStateFromProps 또는 componentDidUpdate를 사용해야 합니다.

class MyComponent extends React.Component {
  componentWillMount() {
    console.log("이 메서드는 더 이상 사용되지 않습니다!");
  }

  render() {
    return <div>React.StrictMode에서 경고 발생!</div>;
  }
}

 

2. 사이드 이펙트 감지

React.StrictMode는 컴포넌트를 의도적으로 두 번 렌더링합니다. 이 과정에서 아래와 같은 사이드 이펙트를 감지할 수 있습니다:

• 컴포넌트가 렌더링 도중 상태를 변경하는 경우
• useEffect 또는 useLayoutEffect 내부에서 부적절하게 사용된 코드

import React, { useState } from "react";

function SideEffectExample() {
  const [count, setCount] = useState(0);

  // 잘못된 사용 예시: 렌더링 중 상태 변경
  if (count === 0) {
    setCount(1); // React.StrictMode에서 경고 발생!
  }
  return <p>Count: {count}</p>;
}

 

3. 의심스러운 findDOMNode 호출

findDOMNode는 React의 오래된 API로, StrictMode에서는 경고를 발생시킵니다. 대안으로는 ref를 사용하는 것이 권장됩니다.

import React from "react";
import ReactDOM from "react-dom";

class MyComponent extends React.Component {
  componentDidMount() {
    ReactDOM.findDOMNode(this); // StrictMode 경고 발생
  }

  render() {
    return <div>findDOMNode는 사용하지 말아요!</div>;
  }
}

 

대안: ref 사용하기

class MyComponent extends React.Component {
  divRef = React.createRef();
  componentDidMount() {
    console.log(this.divRef.current); // ref를 통해 DOM 요소 접근
  }

  render() {
    return <div ref={this.divRef}>ref 사용하기</div>;
  }
}

 

4. 중복 키 문제 감지

React에서 배열의 요소를 렌더링할 때 key가 중복되거나 없는 경우, StrictMode가 이를 감지합니다.

const items = ["A", "B", "C"];

function List() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item}> // 중복 키를 사용하면 경고 발생
          {item}
        </li>
      ))}
    </ul>
  );
}

---

실무에서 StrictMode가 필요한 이유 💡

1. 더 나은 코드 품질
   • 문제를 사전에 감지하고 수정함으로써, 코드 품질이 향상됩니다.
2. 미래 대비
   • React의 최신 기능과 미래 업데이트에 대비할 수 있습니다.
3. 협업 효율성 향상
   • 팀원 간의 코드 일관성을 유지하고, 유지보수를 쉽게 만듭니다.

---

React.StrictMode 사용 시 주의사항 ⚠️

1. 개발 환경에서만 사용

StrictMode는 개발 환경에서만 동작합니다. 프로덕션 빌드에서는 비활성화됩니다.

 

2. 두 번 렌더링으로 인한 혼란

컴포넌트를 두 번 렌더링하기 때문에, 불필요한 경고를 유발할 수 있습니다. 하지만 이는 문제를 미리 발견하기 위한 의도적인 동작입니다.

 

3. 기존 코드와의 충돌

오래된 라이브러리나 API를 사용하는 경우, StrictMode에서 호환되지 않을 수 있습니다.

---

React.StrictMode 요약 📝

특징	설명
Deprecated 메서드 감지	오래된 라이프사이클 메서드 사용 시 경고 발생
의도적인 두 번 렌더링	문제를 미리 감지하기 위해 컴포넌트를 두 번 렌더링
findDOMNode 경고	findDOMNode 대신 ref 사용 권장
React 18과 호환성	자동 배치 및 동시성 모드와 함께 잘 작동
프로덕션에서 비활성화	개발 중에만 활성화되어 성능에 영향을 주지 않음

 

React.StrictMode는 개발 중 문제를 미리 감지하고 고품질의 코드를 작성하도록 돕는 강력한 도구입니다. 이를 활용해 React 애플리케이션의 안정성과 유지보수성을 높여보세요!

 

🌷전설의 개발자가 되어봅시당! 🌷