useEffect 의존성배열을 비웠는데 왜 렌더링이 두번이 되죠?

얼마전에 컴포넌트가 마운트가 될 때 한번만 데이터 페칭을 해주기 위해

useEffect(
  	() =>{ getData('something') }, [])

요런식으로 로직을 짰더니 킬 때마다 화면이 한번 깜빡 거리는 것이었다! (매번 랜덤한 데이터를 불러오는 api였음)

알고보니 React18 + StrictMode에서는 개발모드에서 data fetching이 최소 두 번이상 일어날 수 있다는 특징이 있었다(!)

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

생각보다 많은 사람들이 나와 같은 문제를 직면하고 있음을 알 수 있었다.

공식문서에 따르면, strict mode를 통해 아래와 같이 개발자들의 실수를 방지하고자 부가적 검사를 해준다고 적혀있다.

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다.
Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.
Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.

렌더링 두번을 피하고 싶다면, strict mode를 제거했을 경우 더이상 두번의 렌더링이 일어나지 않는다(!)

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

참고한 자료 👉
https://stackoverflow.com/questions/72112028/does-strict-mode-work-differently-with-react-18

리액트의 strict mode 에 대한 공식문서 설명 👉
https://ko.reactjs.org/docs/strict-mode.html