리액트 콘솔이 두 번 찍힐 때

console.log를 찍었는데 이렇게 두 번씩 찍히고 출력되는 경우가 생길 수 있다...

이런 경우 index.js에서 <App/>을 감싸고 있는 <React.StricMode>를 빼준다!

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  //<React.StrictMode>
    <App />
  //</React.StrictMode>
);

reportWebVitals();

이 후 콘솔을 찍어보면 

정상 출력되는 것을 확인할 수 있다!

 

그렇다면 왜 그런 것일까....

 

StrictMode는 리액트 개발 도중 발생하는 문제를 감지하기 위한 설정으로 해당 설정 시 개발 모드일 때만 렌더링이 두번 발생된다!!

StrictMode를 제거하려면 <React.StrictMode/>태그를 제거해주면 된다!