Reactjs 렌더링이 두 번 발생하는 이유

ReactJs 에서 렌더링이 계속 두번씩 달생했다.

index.js에 React.StrictMode를 제거 해주면 된다. 그러면 두번씩 발생이 되지 않는다.

npx create-react-app 로 생성을 하게되면, 아래처럼 파일이 생성이 되어 있다.

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>
);


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

아래처럼 React.StrictM 삭제를 해주면 렌더링은 한번만 진행된다.

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(<App />);


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

개발자모드에서만 진행되며, 프로덕션 빌디시 StrictMode는 영향을 끼치지 않는다.

StrictMode는 아래와 같은 부분에서 도움이 됩니다.

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사
• Ensuring reusable state

[Reactjs 공식문서]