[React] local에서 실행 시 render가 두 번 되고 있어요!

🔰 Strict Mode에서 왜 두번 render되는지 이해할 수있다.

 

✅ local에서 실행해보니

개인 프로젝트를 만들 던 중, 로컬에서 실행 시 console.log가 두 번 찍히는 것을 볼 수 있었다.

확인해보니 렌더링이 두번 호출이되는 것을 알 수 있었고, 왜 그런지 확인해보고자 했다.

 

 

✅ React strict mode

 

그 이유를 찾아보니, index.js에 React.StrictMode를 구성해두면 그렇다고 한다.

Meta에서는 리액트에서 언세이프한 코드 감지하기 위해, 개발모드에서 의도적으로 마운팅을 두 번 일으킵니다

즉, 두 번 마운트 일어나더라도 문제 없이 동작해야 버그가 없다는 증거가 되기 때문이다.

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

 

 

StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다.

주의

Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.

애플리케이션 내 어디서든지 아래와 같이 strict 모드를 활성화할 수 있습니다.

 

 

 

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

위의 예시에서, Header와 Footer 컴포넌트는 Strict 모드 검사가 이루어지지 않습니다. 하지만, ComponentOne과 ComponentTwo는 각각의 자손까지 검사가 이루어집니다.

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

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

React의 향후 릴리즈에서 더 많은 기능이 더해질 예정입니다.

 

https://ko.reactjs.org/docs/strict-mode.html

Strict 모드 – React

 

 

Stricter Strict Mode: 앞으로 React는 구성 요소가 마운트 해제 사이에 상태를 보존할 수 있는 기능을 제공할 것입니다. 이에 대비하기 위해 React 18은 Strict Mode에 대한 새로운 개발 전용 검사를 도입했습니다.
React는 구성 요소가 처음으로 마운트될 때마다 모든 구성 요소를 자동으로 마운트 해제하고 다시 마운트하여 두 번째 마운트에서 이전 상태를 복원합니다. 이로 인해 앱이 중단되는 경우 기존 상태로 다시 탑재할 수 있도록 구성 요소를 수정할 수 있을 때까지 엄격 모드를 제거하는 것이 좋습니다.

 

https://github.com/facebook/react/blob/main/CHANGELOG.md#react-1

GitHub - facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces.