[React/Next.js] useEffect() 사용시 console 두번씩 실행 될때

⭐️ useEffect() 가 두번 실행되는 이유

1. useEffect 2번째 인자에 빈 배열을 넣어주지 않은경우

	useEffect(()=> {})  (X)
	useEffect(() => {},[])  (O)

하지만 빈 배열을 넣어줬음에도 두번 실행됬다..

2. React.StricMode

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

저 StricMode 를 지우면 두번씩 실행되는 문제가 해결이 된다고 한다.
하지만 이경우는 React.js 를 사용하는 경우이고,

⭐️ 해결

나는 Next.js 를 사용하기 때문에 next.config.js 에서 해결할수 있었다.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true, // 여기
  swcMinify: true,
}

module.exports = nextConfig

reactStrictMode 값을 true 를 false 로 바꿔주었다.

  reactStrictMode: false,

서버 재시작 까지 해주면 🌈해결 완료🌈

그래서 Strict Mode 가 뭐지 ?

리액트에서 제공하는 검사도구 이다.
개발모드 시에만 디버그 하며 <StrictMode> 로 감싸져있는 자손까지 검사를 한다고 한다.

개발 이후 배포 시 문제가 될만한 이슈들을 미리 잡아주는 절차 라고 해두면 되겠다!