React와 React-DOM의 아키텍처 - 뇌와 손은 어떻게 분리되었나?

Table of Contents

우리는 React의 내부 메커니즘, 모범 사례, 디자인 패턴, 그리고 고급 개념들을 탐구합니다.

이 글들은 기본을 넘어 React가 내부적으로 어떻게 작동하는지 진정으로 이해하고자 하는 React 개발자들을 위해 작성되었습니다.

서론: 두 개의 패키지, 하나의 철학
#

React는 ‘react’와 ‘react-dom’이라는 두 개의 개별 패키지로 나뉘어 있습니다.

이 분리는 단순히 기술적인 선택이 아니라, React의 핵심적인 아키텍처 비전을 반영합니다.

마치 인간의 신체처럼, React는 ‘생각하는 뇌’와 ‘실행하는 손’으로 역할을 명확히 나누고 있습니다.

오늘은 이 두 패키지의 역할과 그 분리 뒤에 숨겨진 깊은 의미를 자세히 살펴보겠습니다.

React 패키지: 애플리케이션의 ‘뇌’
#

‘react’ 패키지는 React 애플리케이션이 무엇인지를 정의하는 핵심 로직을 담고 있습니다.

마치 모든 것을 계획하고 결정하는 ‘뇌’와 같습니다.

컴포넌트, 엘리먼트, 상태를 생성하고 관리하는 모든 추상적인 작업이 바로 이곳에서 이루어집니다.

구체적으로 이 패키지는 다음을 관리합니다.

‘React 엘리먼트 생성’: 우리가 JSX로 작성한 코드를 바탕으로, 화면에 그려질 내용에 대한 ‘설계도’인 가상 DOM(React 엘리먼트 객체)을 만듭니다.
‘컴포넌트 시스템 관리’: 함수형 컴포넌트와 클래스 컴포넌트의 정의, props 전달 등 컴포넌트의 기본 구조를 관장합니다.
‘훅(Hooks)과 내부 로직’: useState, useEffect 등 훅의 모든 로직은 여기에 있습니다. 훅은 컴포넌트의 상태와 생명주기를 관리하는 ‘규칙’이므로, 특정 플랫폼에 종속되지 않습니다.
‘상태 관리와 컨텍스트’: 컴포넌트의 상태 변경을 추적하고, Context API를 통해 상태를 전파하는 모든 메커니즘을 포함합니다.

가장 중요한 점은 ‘react’ 패키지가 ‘플랫폼에 구애받지 않는다(platform-agnostic)‘는 것입니다.

이 안에는 웹 브라우저의 DOM이나 모바일의 네이티브 UI에 대한 코드가 단 한 줄도 없습니다.

오직 순수한 ‘무엇을(what)’ 렌더링할지에 대한 계획과 로직만 존재합니다.

이 덕분에 React는 웹, 모바일, 데스크톱, 심지어 VR 애플리케이션까지 넘나들 수 있는 것입니다.

React-DOM 패키지: 브라우저를 위한 ‘손’
#

‘react-dom’ 패키지는 ‘웹 브라우저’라는 특정 플랫폼을 위해 만들어졌습니다.

이 패키지의 역할은 React라는 ‘뇌’가 만든 추상적인 세계(가상 DOM)와 실제 브라우저 DOM을 연결하는 ‘다리’이자, 그 계획을 실행하는 ‘손’입니다.

React의 지시를 실제 DOM 변경으로 바꾸는 모든 구체적인 작업이 이곳에서 이루어집니다.

주요 책임은 다음과 같습니다.

‘초기 DOM 렌더링 관리’: createRoot(document.getElementById('root'))와 같이, React 애플리케이션을 실제 HTML 문서의 특정 지점에 처음으로 ‘장착(mount)‘시키는 역할을 합니다.
‘효율적인 DOM 업데이트’: 상태가 변경되었을 때, ‘뇌(react)‘로부터 변경 사항에 대한 지시를 받아, appendChild, setAttribute, removeChild 등 브라우저가 알아듣는 명령어로 실제 DOM을 최소한으로 조작합니다.
‘브라우저 이벤트 처리’: 우리가 JSX에 작성하는 onClick, onChange 같은 이벤트들을 처리합니다. 흥미롭게도, react-dom은 각 버튼마다 이벤트 리스너를 다는 대신, 애플리케이션 루트에 단 하나의 이벤트 리스너를 두고 ‘이벤트 위임(event delegation)‘을 통해 모든 이벤트를 효율적으로 관리합니다.

왜 두 개의 패키지로 분리했을까?
#

이 아키텍처 분리는 여러 가지 중요한 이점을 제공합니다.

1. 이식성 (Portability)
#

이것이 가장 큰 이유입니다.

React의 ‘뇌’는 그대로 둔 채, ‘손’의 역할만 하는 ‘렌더러(Renderer)‘를 교체하면 다른 환경에서도 React를 사용할 수 있습니다.

// 웹에서는 React-DOM 렌더러를 사용합니다.
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("root"));
root.render(<App />);

// 모바일에서는 React-Native 렌더러를 사용합니다.
import { AppRegistry } from "react-native";
AppRegistry.registerComponent("App", () => App);

// 테스트 환경에서는 React-Test-Renderer를 사용합니다.
import renderer from "react-test-renderer";
const tree = renderer.create(<App />).toJSON();

이 모든 환경에서 App 컴포넌트 자체는 동일하게 재사용될 수 있습니다.

이것이 바로 React의 ‘한 번 배워서, 어디서든 작성한다(Learn Once, Write Anywhere)‘는 철학의 핵심입니다.

2. 독립적인 유지보수 및 발전
#

각 패키지는 독립적으로 발전할 수 있습니다.

예를 들어, React 팀은 브라우저 DOM의 변화와는 상관없이 새로운 훅(useOptimistic 등)을 ‘react’ 패키지에 추가할 수 있습니다.

반대로, 브라우저에 새로운 API가 등장하면, ‘react-dom’ 팀은 React의 핵심 로직을 건드리지 않고도 렌더링 성능을 최적화할 수 있습니다.

3. 최적화 및 번들 크기
#

이 분리는 번들 크기를 최적화하는 데 도움이 됩니다.

예를 들어, 모바일 앱을 빌드할 때는 웹 브라우저의 DOM 조작과 관련된 react-dom의 방대한 코드를 포함할 필요가 전혀 없습니다.

JSX 없이 React 사용해보기
#

이 분리 구조를 실제로 체감할 수 있는 재미있는 방법이 있습니다.

바로 JSX 없이 React를 사용하는 것입니다.

사실 JSX는 React.createElement() 함수를 더 편하게 쓰기 위한 ‘문법적 설탕(Syntactic Sugar)‘일 뿐입니다.

// createElement와 useState는 'react' 패키지에서 옵니다.
const { createElement, useState } = React;

function Counter() {
  const [count, setCount] = useState(0);

  // 이 모든 것은 UI의 '설계도'를 만드는 과정입니다.
  return createElement("div", null, [
    createElement("p", null, `Counter: ${count}`),
    createElement(
      "button",
      { onClick: () => setCount(count + 1) },
      "Increment"
    ),
    createElement(
      "button",
      { onClick: () => setCount(count - 1) },
      "Decrement"
    ),
  ]);
}

// createRoot와 render는 'react-dom' 패키지에서 옵니다.
const root = ReactDOM.createRoot(document.getElementById("root"));
// '뇌'가 만든 설계도(엘리먼트)를 '손'에게 전달하여 화면에 그리도록 명령합니다.
root.render(createElement(Counter));

솔직히 말해, 보기에 아주 장황한 코드죠! 😅 이것이 바로 우리가 JSX의 편리함에 감사해야 하는 이유입니다.

결론
#

react와 react-dom의 분리 아키텍처는 훌륭한 설계가 어떻게 코드에 유연성과 유지보수성을 부여하는지 보여주는 완벽한 예시입니다.

이 구조는 React가 다양한 환경에서 작동하게 하면서도, 코드베이스를 일관되고 최적화된 상태로 유지할 수 있게 해줍니다. 핵심을 다시 정리해 보겠습니다.

‘React’는 ‘무엇을’ 할지 결정하는 ‘뇌’입니다.
‘React-DOM’은 브라우저에서 그 결정을 실행하는 ‘손’입니다.
이 분리 덕분에 React는 다른 플랫폼(모바일 등)에서도 작동할 수 있습니다.
각 플랫폼에 맞는 최적화를 가능하게 합니다.
서버 컴포넌트나 스트리밍 같은 현대적인 고급 기능을 지원하는 기반이 됩니다.

이 아키텍처는 React 19와 그 이후에도 계속해서 발전하며, React가 성공할 수 있었던 이유인 단순함과 유연성을 유지하면서 개발자들에게 더 많은 가능성을 열어줄 것입니다.

서론: 두 개의 패키지, 하나의 철학 #

React 패키지: 애플리케이션의 ‘뇌’ #

React-DOM 패키지: 브라우저를 위한 ‘손’ #

왜 두 개의 패키지로 분리했을까? #

1. 이식성 (Portability) #

2. 독립적인 유지보수 및 발전 #

3. 최적화 및 번들 크기 #

JSX 없이 React 사용해보기 #

결론 #