[React] 로그가 두 번씩 찍힐 때. (StrictMode)

create-react-app을 이용하여 project를 생성하면 기본적으로 최상의 root element render 시에 StrictMode로 감싸준다.

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로, 개발 모드에서만 활성화 됩니다.

 

기본적으로 생성되고 프로덕션 빌드 시에는 영향을 주지 않기 때문에 유용하지만,

정확한 내용을 파악하고 있지 않으면 개발 시에 혼란을 겪을 수 있습니다.

 

저도 React 공부 중에 useEffect 함수 안에 사용한 console.log가 두 번씩 찍혀서 이상하다고 생각하다가 

좀 찾아보니 StrictMode에서는 몇 개의 함수를 의도적으로 두 번 호출하여 문제가 되는 부분을 발견할 수 있게 한다고 합니다. 의도적으로 두 번씩 호출하는 함수는 다음과 같습니다.

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

해당 함수가 두 번씩 호출되는 경우 index.js 파일에서 StrickMode를 사용하고 있는지 확인해보시기 바랍니다.

 

출처 : https://ko.reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects