react UseEffect 두번실행되는 오류

nodejs로 뉴스피드프로젝트를 진행하게되면서, 프론트엔드는 리액트로 구현하는 방식으로 진행하게되었는데,

컴포넌트가 렌더링 될때만 어떤 함수를 실행해야하는 기능이 필요해서 UseEffect 리액트 훅을 사용하게 됐다.

근데 그 컴포넌트가 렌더링 될 때 마다 useEffect가 두번씩 실행하게 되는 문제가 발생했다.

1. 마운트될때만 실행

첫번째는 useEffect의 두번째 파라미터의 문제인가 싶어서 계속 바꿔 봤다.

useEffect(() => {
  console.log('마운트 될 때만');
}, []);

두번째 파라미터에 들어가는 상태가 변경 될 때 마다 이 useEffect를 실행하게 되는데, 이 부분을 빈 배열로 두면 마운트 시에만 해당 함수가 실행된다.

그러나 빈배열로 둬봐도 어떤 props를 넣어도 해당 문제는 지속됐다.

2. <React.StrictMode>

이것 때문에 문제가 생겼던 아주 기본적인 문제였다.

index.js를 보면 App태크가 <React.StrictMode>태그로 감싸져 있었는데
이친구는 리액트에서 개발 모드 시 디버그를 하기 위해서 있는 컴포넌트였다.

해당 부분은 cra로 앱을 만들 때 이부분을 자동으로 넣어주는 것 때문이고

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

해당 부분을 제거하면 컴포넌트가 두번씩 렌더링되는 문제가 사라진다.