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