React에서 React.StrictMode 사용법

 

React.StrictMode는 리액트 애플리케이션 내에서 잠재적인 문제를 식별하고 경고하는 데 사용되는 도구입니다. 개발 모드에서만 활성화되며, 빌드된 프로덕션 버전에서는 아무런 영향을 미치지 않습니다. 이 글에서는 React.StrictMode의 사용법과 주요 기능, 그리고 그것이 제공하는 장점에 대해 자세히 설명하겠습니다.

1. React.StrictMode란 무엇인가?

React.StrictMode는 리액트 애플리케이션의 하위 트리에서 잠재적인 문제를 발견하고 알려주는 도구입니다. 개발 중에 코드의 품질을 향상시키고, 향후 리액트의 업그레이드에 대비할 수 있도록 도와줍니다. 주요 기능으로는 다음과 같은 것들이 있습니다.

• 안전하지 않은 생명주기 메서드 확인: 일부 생명주기 메서드는 비동기 렌더링에서 예기치 않은 동작을 초래할 수 있습니다. StrictMode는 이러한 메서드의 사용을 감지하여 경고합니다.
• 레거시 문자열 ref 사용 감지: 문자열 ref는 콜백 또는 React.createRef()로 대체되어야 합니다. StrictMode는 문자열 ref의 사용을 감지합니다.
• 함수 컴포넌트에서의 사이드 이펙트 검사: StrictMode는 초기 렌더링 및 재렌더링 시 함수 컴포넌트 내부에서 발생하는 사이드 이펙트를 감지합니다.
• 배치된 업데이트의 올바른 사용 보장: 여러 업데이트가 올바르게 배치되었는지 확인합니다.

2. React.StrictMode의 사용법

React.StrictMode를 사용하는 것은 매우 간단합니다. React.StrictMode는 React.Fragment와 유사하게 작동하며, 특정 컴포넌트 또는 전체 애플리케이션을 감싸는 형태로 사용합니다. 다음은 사용 예제입니다.

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

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

위 예제에서는 <App /> 컴포넌트를 React.StrictMode로 감싸서, App 컴포넌트와 그 하위 컴포넌트에서 발생하는 잠재적인 문제를 감지할 수 있도록 설정했습니다.

3. 주요 기능 및 장점

React.StrictMode의 주요 기능과 그로 인한 장점에 대해 자세히 살펴보겠습니다.

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

React.StrictMode는 다음과 같은 생명주기 메서드의 사용을 감지합니다.

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

이 메서드들은 비동기 렌더링에서 문제가 발생할 수 있어, 대체 메서드인 componentDidMount, componentDidUpdate, getDerivedStateFromProps 등을 사용하도록 권장됩니다.

class ExampleComponent extends React.Component {
  componentWillMount() {
    // 경고: 이 메서드는 더 이상 사용되지 않습니다.
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

3.2 레거시 문자열 ref 사용 감지

문자열 ref는 React.createRef() 또는 콜백 ref로 대체해야 합니다. 문자열 ref 사용 시 경고 메시지가 출력됩니다.

class MyComponent extends React.Component {
  render() {
    return <div ref="myRef">Hello, World!</div>; // 경고: 문자열 ref 사용
  }
}

위 코드는 다음과 같이 수정되어야 합니다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>;
  }
}

3.3 함수 컴포넌트에서의 사이드 이펙트 감지

React.StrictMode는 함수 컴포넌트 내에서의 사이드 이펙트를 감지하기 위해 두 번 렌더링합니다. 이는 개발 환경에서만 발생하며, 사이드 이펙트가 발생하는 지점을 쉽게 파악할 수 있습니다.

function MyComponent() {
  useEffect(() => {
    console.log('Effect 실행');
  }, []);

  return <div>Hello, World!</div>;
}

위 코드는 개발 모드에서 두 번 실행되어 'Effect 실행'이 두 번 출력됩니다. 이는 사이드 이펙트를 감지하기 위한 목적입니다.

3.4 배치된 업데이트 확인

React.StrictMode는 배치된 업데이트가 올바르게 작동하는지 확인합니다. 이는 여러 상태 업데이트가 동시에 발생할 때 성능을 최적화하고 일관성을 유지하기 위함입니다.

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

  useEffect(() => {
    setCount(count + 1);
    setCount(count + 2);
  }, []);

  return <div>{count}</div>;
}

위 예제에서는 count 상태가 예상대로 2가 아닌 1로 업데이트됩니다. 이는 StrictMode가 배치된 업데이트를 확인하기 때문입니다.

4. 결론

React.StrictMode는 리액트 애플리케이션에서 잠재적인 문제를 조기에 발견하고, 안전한 코드를 작성하도록 도와주는 유용한 도구입니다. 비록 프로덕션 환경에서는 아무런 영향을 미치지 않지만, 개발 중에는 코드의 품질을 향상시키고, 향후 리액트의 업그레이드에 대비할 수 있도록 도와줍니다. React.StrictMode를 사용하여 애플리케이션을 감싸고, 잠재적인 문제를 조기에 발견하여 더 나은 코드를 작성해 보세요.