react useEffect 2번 실행되는 문제

react useEffect를 사용하는데 로그가 이상하게 두번씩 찍힌다.🤔 🤔

 

dependency array에 빈 배열만 넣어주게 되면 컴포넌트가 마운트 되었을 때만 실행된다.

(마운트 되었다는 의미는, DOM 객체가 생성되고 브라우저에 해당 컴포넌트가 나타나는 것)

 

그 이후에 리렌더링 되어도 해당 로그는 찍히지 않는다.

 

  useEffect(() => {
    console.log('useEffect');
  }, []);

 

처음 페이지 로딩 시, useEffect가 두번씩 찍혀서 찾아보니

 

next.config.js에서 reactStrictMode: false로 추가 또는 변경하니 이제 한 번만 찍히게 된다!

const nextConfig = {
  reactStrictMode: false,
};

 

참고