[Solved] useEffect 두번 실행 되는 문제 (strictMode)

React나 NextJS를 사용하시는 분들이라면, useEffect를 사용할 때 dependency를 [] 빈배열로 넣어주게 되면,
해당 useEffect는 처음 렌더될 때 한번만 실행 되게 된다는 것을 알 것입니다.
근데, 이상하게 useEffect안의 함수가 2번 실행되는 것을 보고 해결해보고자 합니다.

 

사실,  이 문제는 React를 사용할 때 이미 겪어본 문제였습니다. 
React에서는 App 컴포넌트를 감싸고 있는 React.StrictMode 태그를 제거 해주면 됐지만, 

 

NextJS의 app.tsx의 경우에는 strictMode 태그가 안보였습니다.

 

하지만 결국 strictMode를 풀면 해결되는 문제였기에, next.config.js 파일에서 

strict 모드를 false로 주고 재 실행 하니 한번만 실행되는 것을 볼 수 있었습니다.

 

const path = require('path')
const nextConfig = {
  reactStrictMode: false,
  swcMinify: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

module.exports = nextConfig