[React] React에서 Strict Mode란?

원문 출처: https://medium.com/@codeofrelevancy/what-is-strict-mode-in-react-cc8b51fb6096

What is Strict Mode in React?

 

React에서 Strict Mode란?

안녕하세요, React 개발자 여러분. 아마도 Strict Mode라는 용어를 들어보셨을 겁니다. 그러나 이게 뭐죠? 간단히 말해서, React.StrictMode은 애플리케이션에서 발생할 수 있는 잠재적인 문제를 강조하기 위한 유용한 컴포넌트입니다. <Fragment>와 마찬가지로, <StrictMode>는 추가적인 DOM 요소를 렌더링하지 않습니다. 이 글에서는 strict mode가 무엇인지, 어떻게 작동하는지, 그리고 애플리케이션에서 사용하는 것이 좋은 이유에 대해 자세히 알아보겠습니다.

Strict mode는 코드에서 실제 버그가 되기 전에 잠재적인 문제를 잡아내는 데 도움이 되는 개발 도구 세트입니다. React 애플리케이션에서 strict mode를 활성화하면 React에게 더 많은 체크와 경고를 활성화하도록 지시합니다. 이러한 체크와 경고는 다음과 같은 것들을 잡을 수 있습니다.

1. 부작용이 있는 컴포넌트
2. 폐기된 라이프사이클 메소드 또는 위험한 라이프사이클 메소드
3. 특정 내장 함수의 위험한 사용
4. 리스트에서 중복된 키

 

Strict Mode 활성화하기

React 애플리케이션에서 strict mode를 활성화하는 것은 실제로 매우 쉽습니다. 다음과 같은 한 줄의 코드를 메인 index.js 파일에 추가하여 수행할 수 있습니다.

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

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

 

앱 일부분에 Strict Mode 활성화하기

애플리케이션의 일부분에도 Strict Mode를 활성화할 수 있습니다.

import { StrictMode } from 'react';

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

이 경우, Strict Mode 체크는 Header와 Footer 컴포넌트에서 실행되지 않습니다. 그러나 Sidebar와 Content 및 그 안에 있는 모든 컴포넌트에서 실행됩니다.

 

Strict mode는 개발 환경에만 영향을 미칩니다.

Strict mode는 React 애플리케이션의 프로덕션 빌드에는 영향을 미치지 않는다는 것을 명심해야 합니다. 즉, Strict mode에서 활성화된 체크 또는 경고는 사용자가 보는 애플리케이션의 최종 버전에 포함되지 않습니다. Strict mode는 추가적인 체크와 경고를 활성화하기 때문에 개발 환경에서 속도가 느려질 수 있습니다.

 

Strict mode는 미묘한 버그를 잡는 데 도움이 됩니다.

React 애플리케이션에서 발생하는 버그는 때로는 레이스 컨디션(race condition)이나 컴포넌트 상태에 대한 잘못된 가정과 같은 미묘한 문제 때문에 추적하기 어렵습니다. Strict mode를 활성화하고 제공되는 추가적인 체크와 경고를 활용하면, 심각한 문제가 발생하기 전에 이러한 버그를 잡을 수 있습니다.

 

Strict mode를 사용하여 최신 모범 사례를 따르세요.

React는 급속히 발전하는 프레임워크이며 최신 모범 사례는 시간이 지남에 따라 변경될 수 있습니다. Strict mode를 활성화하고 제공되는 경고와 제안에 주의하면, React 코드가 최신 모범 사례를 따르고 있는지 확인할 수 있습니다. 예를 들어 리스트를 렌더링할 때 key prop을 사용하거나 render()에서 부작용을 피하는 것과 같은 사례가 있습니다.

 

잠재적인 문제를 빨리 파악하세요.

Strict mode는 앞으로 문제를 일으킬 수 있는 코드의 문제점을 잡아낼 수 있습니다. 예를 들어 폐기된 라이프사이클 메소드나 더 이상 권장되지 않는 findDOMNode()에 대한 접근 등을 감지하고 경고를 보낼 수 있습니다.

 

일반적인 실수를 피하세요.

Strict mode를 활성화하면 setState()를 사용하는 대신 상태를 직접 수정하거나 undeclared 변수를 사용하는 등 즉각적으로는 명백하지 않은 일반적인 실수를 피할 수 있습니다.

 

안전하지 않은 라이프사이클 식별

React Strict Mode를 사용하면 컴포넌트에서 안전하지 않은 라이프사이클 방법을 식별할 수 있습니다. 예를 들어 componentWillUpdate 및 componentWillReceiveProps 메소드의 사용을 경고하거나 이 메소드는 안전하지 않으며 React의 향후 버전에서 제거됩니다.

 

레거시 문자열 ref API 사용에 대한 경고

React Strict Mode는 레거시 문자열 ref API의 사용에 대한 경고를 제공할 수도 있습니다. 이는 사용이 중단된 API이므로, 더 안전하고 쉬운 createRef API를 사용해야 합니다.

이미 Strict mode를 사용하고 있지 않다면, 반드시 고려해보세요!!!