[DevNote] 0509

오늘 새로 배운 것.

React 18에 새롭게 추가 된 것.

요즘 React에 대한 개념이 부족한 것 같다는 생각에 React강의를 들으며 알게 된 내용을 정리하려 한다.

• ReactDOM이란?

리액트라는 것은 순수자바스크립트이고, 자바스크립트로 컴포넌트를 만들어 나가는 것입니다.브 라우저는 HTML, CSS, 순수 Javascript만을 이해 할 수 있습니다. 그래서 리액트로 작성한 것들은 Babel을 통해 순수 자바스크립트로 변환되게 됩니다. 그렇게 순수 자바스크립트로 변환된 우리의 컴포넌트를 HTML과 연결해주는 작업을 해줘야 하는데, 그것을 가능하게 하는 것이 React-Dom입니다.

• React18 부터 달라진 연결 방법

React 17까지는 ReactDOM이라는 객체를 받아와서 그안에 render라는 함수를 호출하여 우리가 만든 App이라는 컴포넌트와 HTML에서 root라는 아이디를 가진 최상위 노드를 찾아서 연결해 주었다면,

/*  before  */

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

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

reportWebVitals();

React18 버전 이후에는 ReactDOM의 import가 변경되었고, createRoot(rootNode)라는 새로운 method가 등장하였다.

React DOM Client
These new APIs are now exported from react-dom/client:

createRoot : New method to create a root to render or unmount. Use it instead of ReactDOM.render. New features in React 18 don't work without it.

<React 공식 깃헙 설명>

/*  after  */

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const rootNode = document.getElementById("root");

ReactDOM.createRoot(rootNode).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

React18 버전에서 ReactDOM.render를 통해 컴포넌트와 HTML을 연결하게 되면 아래과 같은 경고문을 만나게 된다.

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

개인적인 생각이지만, 아래 버전이 조금더 직관적인 것 같다. rootNode를 찾은다음에 root라는 것을 생성하고 App과 render(연결) 한다고 생각하면 어떨까

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./app";

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