[React] Console.log 두번 실행되는 현상

📚 Console.log 두번 실행

개발하던 도중 props값을 확인하기 위해

console.log로 값을 찍어보는 도중

두번씩 실행된다는것을 발견하게 되었다.

---

📕 왜 두번 실행될까

원인은 React.StrictMode

React.StrictMode는 무엇일까

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구
개발 모드에서만 활성화되며 해당 태그로 감싸져 있는 부분은 자손까지 검사를 한다
안전하지 않은 생명주기를 가진 컴포넌트, 권장되지 않는 부분 등, 배포 후 문제가 될만한 이슈들을 미리 잡는 모드

이와같은 특성을 가지며

<React.StrictMode> 태그로 이 감싸져있으면 개발모드에서 두 번씩 렌더링된다.

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>	<--- 문제의 StrictMode
        <App />
    </React.StrictMode>
);

---

📕 해결

<React.StrictMode>을 주석처리 했더니 문제가 해결되었다.