React는 컴포넌트와 상태를 기반으로 어떤 UI가 되어야 하는지 결정하는 코어 라이브러리이고, ReactDOM은 그 UI를 실제 브라우저 DOM에 렌더링하는 웹용 렌더러이다.

React 프로젝트의 package.json을 보면 보통 react와 react-dom이 함께 설치되어 있다.

{
  "dependencies": {
    "react": "...",
    "react-dom": "..."
  }
}

사실 둘은 하나의 세트가 아니라 서로 다른 역할을 담당하는 별도의 패키지이다.

별생각 없이 항상 같이 설치되어 있어서 하나의 세트라고 생각했는데, 웹에서 React를 사용하려면 두 패키지가 모두 필요하기 때문에 함께 설치해서 사용하는 것이었다...!

직접 설치한다면 다음과 같이 두 패키지를 함께 설치한다.

npm install react react-dom

하지만 Vite로 React 프로젝트를 생성하거나 Next.js의 create-next-app으로 프로젝트를 생성하는 경우에는 이 과정이 프로젝트 생성 과정에 포함되어 있어, package.json에 react와 react-dom이 자동으로 추가된다(두둥)

1. react , react-dom이 뭘까

React
→ 어떤 UI를 보여줄지 결정

ReactDOM
→ 그 UI를 실제 브라우저에 렌더링

react

React는 UI를 정의하고 상태를 관리하는 핵심 라이브러리이다. 즉, 현재 UI가 어떤 모습이어야 하는지 결정하는 역할을 한다. 대표적으로 다음 기능들이 React에 포함되어 있다.

• useState
• useEffect
• useContext
• 컴포넌트
• 상태 관리

react-dom

ReactDOM은 React가 만든 UI를 실제 브라우저 DOM에 렌더링하는 역할을 한다.
대표적으로 다음 기능들이 있다.

• createRoot()
• hydrateRoot()
• createPortal()

예를 들어 다음 코드에서 createRoot()는 react-dom이 제공한다.

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

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

2. 두개가 분리되어있는 이유

React는 브라우저에서만 사용되는 라이브러리가 아니기 때문이다.
React의 핵심 기능과 실제 화면에 렌더링하는 기능을 분리하면, React 자체는 그대로 두고 환경에 따라 렌더러만 바꿀 수 있다.

웹
React + ReactDOM

모바일
React + React Native