[React] StrictMode

React Strict Mode란?

React에서 StrictMode를 사용하면 애플리케이션이 개발 단계에서 잠재적인 문제를 감지할 수 있습니다. 이를 통해 더 나은 코드 품질을 유지하고, 미래의 React 업데이트에서도 안정적으로 동작할 수 있도록 도와줍니다.

Strict Mode가 하는 일

StrictMode를 활성화하면 다음과 같은 부분을 체크해줍니다.

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

• 예전에는 componentWillMount, componentWillReceiveProps, componentWillUpdate 같은 메서드를 많이 사용했지만, 이제는 권장되지 않습니다.
• StrictMode를 사용하면 이런 메서드가 있을 경우 경고를 띄워서 수정하도록 유도합니다.

2. 레거시 문자열 ref 사용 감지

• ref="myRef"처럼 문자열을 사용하는 방식은 이제 권장되지 않습니다.
• 대신 React.createRef()나 useRef() 같은 최신 방법을 사용해야 합니다.

3. findDOMNode 사용 감지

• findDOMNode()는 React의 선언형 방식과 맞지 않아서 권장되지 않습니다.
• StrictMode는 이 메서드를 감지해서 경고를 띄웁니다.

4. 렌더링 시 발생하는 부수 효과 감지

• StrictMode에서는 개발 중에 useEffect 내부 함수가 두 번 실행되는데, 이는 부수 효과가 잘못된 방식으로 동작하는지 확인하기 위해서입니다.
• 이 덕분에 무심코 놓칠 수 있는 문제를 미리 발견할 수 있습니다.

5. 비동기 상태 업데이트 감지

• 상태 업데이트가 비동기적으로 처리될 때 예상치 못한 문제가 발생할 수 있는데, StrictMode가 이를 감지하고 경고를 띄워줍니다.

Strict Mode 사용 방법

React에서 StrictMode를 적용하는 것은 간단합니다. 최상위 컴포넌트를 <React.StrictMode>로 감싸주면 됩니다.

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가 개발 모드에서만 동작하기 때문에, 실제 배포 환경에서는 아무런 영향을 주지 않습니다.

Strict Mode를 사용할 때 주의할 점

1. 개발 환경에서만 동작함
   • StrictMode는 오직 개발 모드에서만 실행됩니다. 프로덕션에서는 신경 쓰지 않아도 됩니다.
2. useEffect가 두 번 실행될 수 있음
   • 개발 모드에서만 발생하는 현상이지만, useEffect 내부 코드가 예상과 다르게 실행될 수 있습니다. 이를 고려해서 작성해야 합니다.

Strict Mode, 꼭 써야 할까?

되도록 사용하는 것이 좋습니다.

• 코드 안정성이 올라가고, React의 최신 패턴을 미리 적용할 수 있습니다.
• React 18부터는 자동 배치(Auto Batching)나 동시성 모드(Concurrent Mode) 같은 기능이 추가되었는데, StrictMode를 사용하면 이런 기능들과도 잘 어울립니다.
• 새로운 프로젝트라면 처음부터 적용하는 것이 좋습니다.

다만 기존 프로젝트에 갑자기 적용하면 경고 메시지가 많아질 수 있으니, 천천히 도입하는 것이 좋습니다.

마무리

React의 StrictMode는 코드 품질을 높이고 유지보수를 쉽게 만들어주는 중요한 기능입니다. 처음에는 불편할 수도 있지만, 장기적으로 보면 안정적인 애플리케이션을 만드는 데 큰 도움이 됩니다. 앞으로 React 프로젝트를 진행할 때 꼭 활용해보시기 바랍니다.