이번 포스트에서는 React 18 이후 버전에서 변경된 렌더링 방식에 대해 적어보려고 한다.

React 18 이전: ReactDOM.render()

React 18 이전에는 ReactDOM.render() 메서드를 사용하여 React 요소를 HTML DOM에 렌더링했었다. 코드 예시는 아래와 같다.

import React from "react"
import ReactDOM from "react-dom"

const navbar = (
    <nav>
        <h1>Bob's Bistro</h1>
        <ul>
            <li>Menu</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
)

ReactDOM.render(navbar, document.getElementById("root"))

React 18: ReactDOM.createRoot(), root.render()

React 18 에서는 새로운 렌더링 방식이다. 예시 코드를 살펴보자.

import React from "react"
import ReactDOM from "react-dom/client"

const navbar = (
    <nav>
        <h1>Bob's Bistro</h1>
        <ul>
            <li>Menu</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
)

ReactDOM.createRoot(document.getElementById("root")).render(navbar)

이 코드 맨밑에 한줄로 써져있는것을 리액트 문서에서는

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(navbar)

이렇게 써주지만 둘은 같다.