React, Strict Mode와 Console 출력

ReactJS, react-app 실습를 하다가 console에 출력이 명령어당 2개씩 되길래
원인을 찾아보았다.



그 원인은 리액트 버전에 따른 Strict Mode에 있었다.






create-react-app을 사용하여 개발 환경을 세팅한다면
StrictMode가 자동 활성화되는데,


Strict Mode는 dev버전에서 코드의 문제점을 발견하고
개발자에게 통지하기 위해 렌더링을 2번씩 한다.



이전 버전에서는 StircMode에서 Double render를 할 때,

console 메서드 silencing 처리를 했다.




StricMode를 해제하지 않고 log을 2개씩 보지 않는 방법은

1. React Dev Tools에 접속하여 StricMode에서 second render에 대한 log 보지않기

체크박스에 마킹

2. <App />을 감싸고 있는 <React.StricMode> warpper 해제

출처

https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode