개발모드에서 useEffect가 2번 실행되는 경우

여러분들 리액트에서 useEffect를 사용하여 코딩을 하는데 useEffect가 2번 실행되어 난감 하셨던 적이 있으신가요?

 

 

저 또한 useEffect에서 데이터가 정상적으로 처리되었는지 확인하기 위해 콘솔 출력을 해보면 2번이 출력되는 문제가 있었습니다.

 

이것의 이유로는 다음과 같습니다.

 

1.React StrictMode - CRA에서 React Strict Mode 없기

cra로 프로젝트를 생성했다면 strict mode가 index.js에 적용되어 있을 텐데 이것을 제거하면 됩니다.

 

2. Next.js에서 React Strict Mode 없애기

next.config.js에서 reactStrictMode를 false로 바꿔주면 됩니다.

 

strict 모드는 안전하지 않은 수명 주기, 레거시 API 사용 및 기타 여러 기능을 식별하는 데 도움을 준다고 합니다.

 

-참고

https://funveloper.tistory.com/110

react 에서 useEffect 가 2번 호출되는 현상 (두 번 렌더링 되는 현상)