두 번 렌더링되는 리액트 템플릿

 

리액트를 사용하여 프로젝트 진행 중 이슈를 발견했습니다.

 

 

 

리액트 템플릿을 가져와서 프로젝트를 구현하는 중,  useEffect를 사용하여 페이지 렌더링 시 함수를 호출하는데

 

자꾸 오류가 발생하여 console.log(1)를 사용해보니 1이 두번 출력되는것을 확인하였습니다.

 

 

 

 

 

 

원인

 

 

개발모드에서 (개발 단계시 오류를 잘 잡기위해) 

 

프로젝트의 src/index.js에서 <React.StrictMode> 태그로 <app/>을 감싸 두 번씩 렌더링한다고 합니다.

 

 

 

src/index.js의 코드를 확인해보니 <React.StrictMode>태그로 감싸져 있었습니다.

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


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

 

 

 

 

 

 

 

 Strict Mode란?

 

 

자바스크립트 코드에 더욱 엄격한 오류 검사를 적용한다고 합니다.

 

쉽게 말해 개발모드에서 문제되는 이슈를 검사하기 위한 모드입니다.

 

 

자세한 설명은 react strict mode의 공식문서 를 참고

 

 

 

 

해결방안

 

src/index.js의 <React.StrictMode> 태그부분을 주석처리하여 해결하였습니다.

 

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


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  {/*<React.StrictMode>*/}  // 이부분
    <App />
  {/*</React.StrictMode>*/}   // 이부분
);

 

 

 

 

 

 

참고자료:

[React] console.log가 두번 실행된다고?

Strict 모드 – React