TIL: React.StricMode 의 역할

React의 StrictMode는 React 애플리케이션의 일부분에 대해 추가적인 검사와 경고를 활성화하는 컴포넌트입니다. StrictMode를 사용하면 애플리케이션 내의 잠재적인 문제를 발견하는 데 도움이 됩니다.

React의 StrictMode는 다음과 같은 경우에 유용합니다:

1. 비효율적인 렌더링 감지: StrictMode는 어떤 컴포넌트가 불필요하게 렌더링되는지를 찾아냅니다. 이는 성능 최적화에 도움이 됩니다.
2. 레거시 API 사용 경고: React가 지원을 중단한 레거시 API를 사용하고 있는지 확인하고, 그렇다면 경고 메시지를 표시합니다.
3. 부적절한 생명주기 메서드 사용 경고: StrictMode는 componentWillMount, componentWillReceiveProps, componentWillUpdate와 같은 오래된 생명주기 메서드들의 사용을 감지하고 경고합니다. 이 메서드들은 더 이상 사용되지 않으며 getDerivedStateFromProps 또는 getSnapshotBeforeUpdate로 대체되었습니다.
4. 예상치 못한 부작용 감지: StrictMode는 생명주기 메서드 내에서 예상치 못한 부작용이 발생하는지 감지합니다.
5. 레거시 context API 감지: 새로운 Context API가 도입되었으므로, 오래된 Context API를 사용하면 경고가 표시됩니다.

StrictMode는 개발 모드에서만 활성화되며, 프로덕션 빌드에서는 아무런 영향을 미치지 않습니다. 이는 StrictMode가 애플리케이션의 동작에는 영향을 미치지 않으면서 개발자가 잠재적인 문제를 발견하고 수정할 수 있도록 도와주는 도구라는 것을 의미합니다.

StrictMode 컴포넌트를 사용하여 감싸고 싶은 부분을 선택적으로 감쌀 수 있습니다. 아래는 StrictMode의 사용 예시입니다:

import React from 'react';

function App() {
  return (
    <React.StrictMode>
      <SomeComponent />
    </React.StrictMode>
  );
}

위의 코드에서 SomeComponent와 그 하위 컴포넌트들은 StrictMode가 적용되어, 위에서 설명한 검사와 경고가 활성화됩니다.