StrictMode는?

• 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다.
• Fragment 와 같이 UI 를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.
• 애플리케이션 내 어디서든지 아래와 같이 strict 모드를 활성화할 수 있습니다.

React에서 console.log() 가 두 번 찍히는 이유?

React 에서 함수형 컴포넌트에 console.log 를 찍어보면 두 번씩 찍히는 증상이 나타난다. 렌더링이 두 번 일어난다고 추측할 수 있다.

결론은 React.StrictMode 때문이었다. index.js 쯤 가보면 우리가 작성한 앱이 <React.StrictMode> 태그로 선언되어 있을 것이다.

Strict 모드는 Fragment 처럼 동작하며, 자식 컴포넌트 까지 모두 엄격하게 검사한다고 생각하면 된다. 공식 문서를 읽어보면 다음과 같이 기술되어 있다.

<aside> 💡

*Strict 모드가 자동으로 부작용을 찾아주는 것은 불가능합니다. 하지만, 조금 더 예측할 수 있게끔 만들어서 문제가 되는 부분을 발견할 수 있게 도와줍니다. 이는 아래의 함수를 의도적으로 이중으로 호출하여 찾을 수 있습니다.

• 클래스 컴포넌트의 constructor, render 그리고 shouldComponentUpdate 메서드
• 클래스 컴포넌트의 getDerivedStateFromProps static 메서드
• 함수 컴포넌트 바디
• Static updater 함수 (setState 의 첫 번째 인자)
• useState, useMemo 그리고 useReducer 에 전달되는 함수

주의 개발 모드에서만 적용됩니다. 생명주기 메서드들은 프로덕션 모드에서 이중으로 호출되지 않습니다.*

</aside>

Ref : https://ko.reactjs.org/docs/strict-mode.html