useEffect(() => {},[]) 두번 실행 되는 문제 해결

useEffect를 사용하는 경우 처음에 렌더링 되었을 때 한번만 실행 되어야 하는데 두 번씩 호출 되는 문제를 겪었다.

	useEffect(()=>{
        console.log("counter 값 변화");
    });
    
   	useEffect(()=>{
        console.log("시작할 때만");
    },[]);

이 문제의 경우 검색해보니

  <React.StrictMode>
    <App />
  </React.StrictMode>

create-react-app으로 프로젝트를 생성하는 경우 index.js에서 React.StrictMode로 App 컴포넘트를 감싸서 렌더링 해주는데 이 경우 개발 단계시 오류를 잡기 위해 두번 렌더링 된다고 한다. 그렇기에 한번만 렌더링 하고 싶은 경우 React.StrictMode를 제거 해주면 된다.