[react] useEffect 두 번 실행될 때

문제

useEffect 실습 예제를 풀다 보니, 이상하게 예제 속  화면처럼 한 번만 출력 되어야 할 console 창에 나는 자꾸만 두 번씩 출력이 되었다.

영 찝찝하고 이유가 궁금해 오늘도 친절하신 구글신께 여쭤보았다. 

 

예제. 분명 렌더링 완료 console 찍은 것이 한번만 나와있다.

이것은 나의 실행창.. 두 번 찍힌다..

 

---

원인

index.js 의 요녀석이 원인이었다.&nbsp;&nbsp;<React.StrictMode> !

 

• 찾아보니 App.js 에 React.StrictMode 가 있어서 그렇다고 한다.
• app을 감싸고 있는 이녀석을 주석처리해 주니 이렇게 나도 강사님 예제처럼 하나만 뜬다. 

주석처리하니까 하나만 뜸.

React strict mode ?

- 스트릭트 모드는 리액트 개발 도중 발생하는 문제를 감지하기 위한 설정으로, 해당 설정 시 개발 모드일 때만 렌더링이 두번 발생된다 한다.

• 공식 문서 (en)
• 공식 문서 (ko)

---

해결

create-react-app을 할 때 기본적으로 깔리는 것  같다. 

개발 할 때 도움 되는 것이니 그냥 그대로 두기로 함. 

---

참고

• https://www.inflearn.com/questions/510296/mount%EA%B0%80-%EB%91%90%EB%B2%88-%EC%8B%A4%ED%96%89%EB%90%98%EB%8A%94%EA%B1%B4-%EC%99%9C-%EA%B7%B8%EB%9F%B4%EA%B9%8C%EC%9A%94
• https://infiduk.github.io/2020/07/22/react-strict-mode.html