[React] 렌더링이 두 번 발생하는 이슈

이슈 현상

같은 컴포넌트가 렌더링이 두 번씩 실행됨. 그래서,  UseEffect 훅으로 렌더링 때마다 호출하게 되어있는  API가 두 번씩 호출됨.

 

원인

npx-create-react-app 으로 생성하면 기본적으로 달려있는 설정인 <React.StrictMode> 때문임.

// ./src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./static/index.css";
import App from "./components/App";

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

 

 

해결방법

// ./src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./static/index.css";
import App from "./components/App";

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