React.StrictMode 때문
이런 식으로 console.log()로 값을 찍어보려 했는데 두 번씩 찍히는 증상이 나타났다. 렌더링이 두 번 일어난다고 추측할 수 있다.
결론은 React.StrictMode 때문이었다. index.js 쯤 가보면 우리가 작성한 앱이 <React.StrictMode> 태그로 싸여 있을 것이다.
Strict 모드는 Fragment와 같이 동작하며 (그냥 감싸는 것), child까지 모두 엄격하게 검사한다고 생각하면 된다. 공식 문서를 읽어보면 다음과 같이 기술되어 있다:
Strict 모드가 자동으로 부작용을 찾아주는 것은 불가능합니다. 하지만, 조금 더 예측할 수 있게끔 만들어서 문제가 되는 부분을 발견할 수 있게 도와줍니다. 이는 아래의 함수를 의도적으로 이중으로 호출하여 찾을 수 있습니다.
•
클래스 컴포넌트의 constructor, render 그리고 shouldComponentUpdate 메서드
•
클래스 컴포넌트의 getDerivedStateFromProps static 메서드
•
함수 컴포넌트 바디
•
State updater 함수 (setState의 첫 번째 인자)
•
useState, useMemo 그리고 useReducer에 전달되는 함수
주의
개발 모드에서만 적용됩니다. 생명주기 메서드들은 프로덕션 모드에서 이중으로 호출되지 않습니다.