리액트 프로젝트를 새로고침하거나, 개발하며 중간중간 저장할 때마다, 두 번씩 콘솔이 찍히거나 더 나아가서 원치않게 너무 많이 렌더링되는 경우가 있다. 나의 경우는 두 경우 모두 발생했었는데, 그 이유를 알아냈다.
npx create로 프로젝트 생성시, 자동으로 설정된 React.StrictMode 때문이다. index.js에서 해당 tag를 제거해주면 컴포넌트가 두 번이나 호출되지 않게 된다.
ReactDom.render(
<App/>
document.getElementById('root');StrictMode는 앱 내 잠재적인 문제를 알아낼 수 있는 도구로 사용된다고 한다. 개발 모드에서만 활성화되며, 프로덕션 빌드에는 영향을 주지 않는다고 한다. 중요한 부분에 사용될 수 있으므로 지우지 말도록 하자.
