[React] React-Dom vs React의 차이점

     

목차

 

 

 

 

리액트를 하면서 문득 react와 react-dom에서 import를 하는 것을 보고 궁금증이 생겨 정리해 보았다.

 

아래 코드를 보면 두 곳에서 불러오는 것을 볼 수 있다.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import { GlobalStyle } from "./global.ts";

const container = document.getElementById("root")!;
const root = createRoot(container);

root.render(
  <StrictMode>
    <GlobalStyle />
    <App />
  </StrictMode>
);

 

 

React

 React는 User Interface 컴포넌트 형태로 구성하는 라이브러리일 뿐이며 웹 또는 브라우저를 위한 라이브러리는 아니다.

 

React는 컴포넌트와 props, state, context를 관리하며, 이들의 변경 사항을 파악하고 변경 사항 snap shot을 React-DOM에 전달한다.

 

 

 

React-Dom

React-DOM은 웹 인터페이스로 웹과 직접적인 연관이 있으며 실제 HTML 요소를 화면에 불러오는 역할을 한다.

따라서, React-DOM은 React로 부터 받은 변경 사항 snap shot과 실제 브라우저 DOM을 비교하며 차이점을 확인 후, 실제 DOM을 조작한다.

 

즉, 실질적인 브라우저 DOM의 조작은 React-DOM이 하게 되며 리액트 컴포넌트의 이전 state와 현재 state를 비교한 뒤, 차이점이 있을 때 업데이트된다.

 

 

 

++추가

React-Router-Dom

react-router-dom은 URL 상태를 감지하고,

그에 따라 적절한 리액트 컴포넌트를 연결해주는 라우팅 엔진이다.

브라우저 DOM을 직접 조작하진 않지만,

React-DOM과 협력하여 컴포넌트 교체를 유도한다.

 

 

 

 

왜 React와 React-DOM이 나뉘었을까?

React를 "플랫폼에 종속되지 않는 라이브러리"로 만들기 위해서이다.

역할	설명
react	상태 관리, 훅, 컴포넌트 구조 등 플랫폼 중립적인 핵심 로직
react-dom	웹 브라우저에 실제로 랜더링하는 랜더러
react-native	모바일 네이티브 앱용 랜더러
react-three-fiber	webgl 3D 랜더링용