Home React, Next.js 함수가 두번 실행되는 문제
Post
Cancel

React, Next.js 함수가 두번 실행되는 문제

  1. 이벤트 핸들러에서 함수가 즉시 실행되는 문제

다음은 문제를 발생시키는 코드입니다.

1
<button onClick={console.log('Clicked!')}>Click Me!</button>

위와 같이 코드르 작성 할 경우 페이지 로드시 btnOnClickEvent() 함수가 즉시 실행되는 문제가 발생합니다. 이르 해결하기 위한 방법으로는 크게 두가지 방식이 있습니다.

1
2
3
4
5
const btnOnClicked = () => {
  console.log('Clicked!');
}
...
<button onClick={btnOnClicked}>Click Me!</button>

함수를 선언하고 선언한 함수르 불라와서 사용하느 방식으로 해결 할 수 있습니다.

두번째는 reactStrictMode로 인해 발생하는 문제입니다.

next.config.js 혹은 react.config.js 파일에서 reactStrictModetrue에서 false로 변경해서 해결할 수 있습니다.

This post is licensed under CC BY 4.0 by the author.