콘솔로그가 두번 출력 될 때(React Strict Mode)

리액트 강의를 따라하며 실습하는데 개발자모드(F12) 콘솔에 계속 두번씩 값이 출력되었다.
이상하게 거슬려서 이유를 찾아보니 한 블로그에 잘 정리되어 있었다.

이렇게 두 번씩 출력됨..

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구라고 한다.

다음과 같은 상황에서 도움을 줄 수 있다.

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사
• Ensuring reusable state

StrictMode는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않는다.

해결방법

오류나 문제로 인해 두 번 출력되는 것은 아니지만 신경쓰인다면
src/index.js의 <React.StrictMode> </React.StrictMode>를 주석처리하거나 제거하면 해결될 것이다!

참고자료

• [@sweet_pumpkin님 velog]
  왜 콘솔로그가 두 번 출력되지? 왜 콘솔로그가 두 번 출력되지? : React StrictMode
• React 공식문서 (Strict Mode)