useEffect 2번발생하는 현상 : 빈배열말고 다른방법 [] x

5o_hyun·2023년 11월 22일
0
post-custom-banner

next로 로그인구현중에 useEffect가 2번발생하는 현상을 맞이했다...
꼭 next가 아니여도 react도 해당되니 일단 한번 보시라고~~

실제로 우리가 구글링하면 자주 나오는 해결법은 뒤에 빈배열을 붙여 최초렌더링을시키는것이다.
하지만 여기까지 보셨으면 아마 이걸로는 해결이 안되서 왔으리라 생각된다.

useEffect=(() => {
	console.log('1번만렌더링');
},[])

나같은경우 놀랍게도 strict mode 때문에 2번 렌더링 되던것이였다.
react는 React.StrictMode 태그를 없애주면되고, 나는 next로 하고있어서 루트에 next.config.js파일에서 reactStrictMode를 true로 바꿔주니 해결됬다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false, // 이부분을 trus -> false로 바꿔주면된다! 
  swcMinify: true,
};

module.exports = nextConfig;

내 코드가 문제라 생각했지 설정때문일거라고는 생각못했지

profile
학생 점심 좀 차려
post-custom-banner

0개의 댓글