Nextjs useEffect 2번 호출

바쁘신분들을 위한 요약.!

strict mode로 인한 두번의 호출 발생

next.config.js에 아래의 코드 추가

reactStrictMode: false,

 

 

 

useEffect !

리액트 개발자라면 무조건 사용하게 될 요녀석 

Next.js에서 사용하게 되면 렌더가 두 번 일어나게 되는데 내가 코드를 잘못작성했는지 한참 찾아봤었다

 

 

나의 경우에는 ,

아이디를 가져와서 없다면 바로 로그인페이지로 보내버리고 콜백도 필요 없는 간단 페이지였다.

  useEffect(() => {
    const userId = JSON.parse(localStorage?.getItem("userId") || "{}");
    if (userId?.state?.userId === 0) {
      alert("상품이 없습니다.");
      router.push("/login");
    }
  }, [router]);

 

아니 이렇게 간단한데 렌더가 두 번이...?

 

구글링에서 찾아낸 값은 아래와 같다.!

 

 

React의 strict mode 때문이라고 한다.

 

Next.js는 13.4 버전부터 strict mode가 default라고 한다.

 

대신! 개발모드에서는 적용되고 배포 환경에서는 적용되지 않는다고 한다

 

끄고싶다면 아래와 같이 코드 수정하면 한번만 호출된다 :)

const nextConfig = {
    reactStrictMode: false,
    ...
};

module.exports = nextConfig;