[ Next.js ] useEffect 가 2번씩 실행되는 현상

nextjs 를 개발중이었는데 백엔드에 테스트 호출을 하고있었는데 console.log 가 두번 실행됬다...

처음에는 혹시 호출이 두번됬나? 하고 찾아봤지만 애초에 테스트용이라 작성한 코드가 얼마 없어서 

문제를 일으킬만한 내용이 없었어요

 

그래서 구글링 하다 보니 해당링크에서 답을 얻을수 있었어요

 

 

https://stackoverflow.com/questions/71835580/useeffect-being-called-twice-in-nextjs-typescript-app

useEffect being called twice in Nextjs Typescript app

 

내용을 보니 nextjs 의 루트 디렉토리에 next.config.js 라는 파일에 

const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

이렇게 reactStrictMode 가 활성화 되어 있었다.

reactStrictMode란 애플리케이션 개발을 돕기 위한 도구로 잠재적인 문제를 찾아내가 위한 모드라고 설명 되어있어요

개발시에만 활성화 되고 실제 프로덕션 빌드 할때는 알아서 꺼진다고 합니다.

이모드에서는 컴포넌트를 2번씩 렌더링 해서 deprecated된 생명주기 메서드의 사용, 예상치 못한 부작용, 레거시 문자열 ref 등을 확인하는 용도라고 합니다. 

이렇게 해서 개발과정에서 잠재적인 문제를 조기에 발션하고 수정하는 용도로 쓰인다고 해요.

 

그래도 2번씩 랜더링 되는걸 원치 않으시다면?

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
}

module.exports = nextConfig

이런식으로 모드를 false 로 설정 해주시면 됩니다!

 

저도 많이 당황 했지만 다행히 빠르게 문제를 해결 할수 있었어요

읽어주셔서 감사합니다!