[TIL] ReactDOM의 변화 / React 18 ver.

김명성·2022년 4월 11일

TIL

목록 보기

6/11

🧑🏻‍🏫 Intro

이번에 새로운 프로젝트를 해보려고 CRA를 설치했다.
평소와 마찬가지로 폴더구조를 대충 정리하고,
화면이 잘 구현되는지 간단한 테스트를 진행해 봤다.

🧑🏻‍💻 과정

에러는 나를 성장시켜.. 하하 에러는 나를 성장시켜..

.. 누구냐 넌..?

생전 처음 보는 에러를 발견했다.
찬찬히 에러메세지를 읽어보니 React 18과 관련된 에러라고 하는 것 같다.

공식문서에 올라온 글을 보더라도 이전의 방식과는 차이가 있다는 것을 발견했다.
물론 지금 당장 이전 버전에서 사용된 방법을 사용하더라도
기능적인 부분에서는 문제가 없겠지만, 추후를 위해서 변경된 방법을 바로 코드에 적용하는 것도 좋을 것 같다.

💥 code

// before

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

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


//solution 1

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

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


// solution 2

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

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

기존 코드와 달라진 점이 있다면 ReactDOM을 직접 사용하지 않고,
react-dom안의 client에 있는 createRoot라는 함수를 이용하고,
render 함수를 이용해 컴포넌트를 그려주는 방식으로 구현 되었다.

혹은 기존 방법과 거의 비슷하지만,
createRoot 함수를 사용 이후, 콜백함수로 render 함수를 사용해 컴포넌트를 그려준다.