[React] React와 ReactDOM

React와 ReactDOM은 React 생태계의 핵심 라이브러리 두 가지입니다.

이 둘은 목적이 다르며, 함께 사용되지만 역할이 명확히 나뉘어 있습니다.

---

🔹 React

✅ 역할

React는 컴포넌트를 만들고 구성하는 역할을 합니다.
즉, UI를 정의하고 로직을 구성하는 도구입니다.

✅ 주요 기능

• React.createElement(): React 엘리먼트 생성
• useState, useEffect 등 훅 제공
• JSX 문법을 해석할 기반 제공
• 컴포넌트 클래스, 함수형 컴포넌트 등 정의

✅ 예시

jsx

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

---

🔹 ReactDOM

✅ 역할

ReactDOM은 React 컴포넌트를 실제 DOM에 연결(render) 하는 역할을 합니다.
즉, React가 만든 가상 DOM을 브라우저의 실제 DOM에 반영합니다.

✅ 주요 기능

• ReactDOM.render() (React 17 이하): root DOM에 React 컴포넌트 마운트
• createRoot().render() (React 18 이상): Concurrent Mode 지원
• DOM 관련 기능 제공 (findDOMNode, hydrate, 등)

✅ 예시 (React 18 기준)

jsx

 

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

 

---

🔸 요약 비교표

항목	React	ReactDOM
역할	컴포넌트 정의 및 구성	컴포넌트를 브라우저 DOM에 렌더링
기능	JSX 처리, 상태 관리, 생명주기 등	DOM 마운트, 언마운트, 초기화 등
사용 위치	컴포넌트 파일 내부	진입점(index.js 등)에서 사용
예시 메서드	React.createElement,useState	ReactDOM.createRoot,ReactDOM.render

 

---

✅ 비유로 설명

• React는 건축 설계도와 같은 것 (무엇을 어떻게 만들지 정의)
• ReactDOM은 시공팀 (설계도를 실제 건물로 짓는 역할)