[React] useEffect 실행시, console.log가 두 번 찍히는 이슈

강의를 듣던 중, useEffect안에서 console.log를 찍으면

콘솔창에 두 개가 찍혀나오는 것이 계속 목격되었다.

실행자체에는 문제가 없지만, 찜찜해서 해당 정보를 찾아보기로 했다.

이유인 즉, src/index.js 안에 있는

import React from "react";
import ReactDOM from "react-dom/client";

import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  // <React.StrictMode> 이 놈과
  <App />
  // </React.StrictMode> 이 놈
);

이 문제가 됐던 것이다. 만 남기면 console.log가 한 번만 찍혀 나온다.

Strict Mode
StrictMode는 리액트에서 제공하는 검사 도구라고 생각하면 될 것 같다.
개발 모드일때만 디버그를 하며
해당 태그로 감싸져 있는 부분은 자손까지 검사를 한다!
안전하지 않은 생명주기를 가진 컴포넌트라든지, 권장되지 않는 부분이 있다든지 배포 후 문제가 될만한 이슈들을 미리 잡는 모드라고 보면 되겠다.

create-react-app으로 리액트 앱을 생성하면 기본적으로 생성되는 태그라고 한다!

React 공식문서 참조