개발하는데 다 이유가 있겠지

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>
)

리액트에서 `StrictMode`라는 키워드를 자주 접해본 적이 있다. 주로 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하기 위해 사용합니다.

목적

1. 오래된 라이프사이클 메서드와 비권장 API 사용을 감지합니다.

`componentWillMount`, `componentWillUnmount`와 같은 메서드는 더 이상 사용이 권장되지 않는데, StrictMode는 이러한 메서드들이 코드에 포함된 경우 경고를 표시합니다.이를 통해 개발자가 최신 React API를 사용하여 보다 안정적이고 효율적인 코드를 작성하도록 돕습니다.

2. 의도치 않은 부수 효과(Side Effect)를 방지합니다.

리액트는 컴포넌트의 렌더링이 예측 가능하고 순수하게 이뤄지길 기대합니다. StrictMode는 이를 검증하기 위해 `useEffect`, `useState`등 일부 Hook이나 메서드를 두 번씩 실행합니다. 이렇게 두 번씩 실행하는 이유는, 동일한 결과가 나오는지 확인함으로써 컴포넌트가 사이드 이펙트를 일으키지 않고 순수하게 동작하는지를 검사하기 위함입니다.

 

결론

`StrictMode`는 예기치 않은 동작이나 버그를 사전에 방지하기 위해 사용합니다. 개발 환경에서 두 번씩 실행해봤을 때 문제가 발생하지 않으면, 프로덕션 환경에서도 안전하게 실행된다고 볼 수 있습니다. 이 과정에서 사이드 이펙트가 발생하면 코드를 수정해야 합니다.

다만, 두 번씩 실행되는 것은 개발 모드에서만 발생하고, 실제 프로덕션 빌드에서는 정상적으로 한 번만 실행됩니다.(성능 영향 X)

`StrictMode`는 개발자가 더욱 안전하고 효율적인 코드를 작성할 수 있도록 도와주는 도구입니다.