React & React-Dom

개요

아래와 같이 기본 index.js를 보면 'react'와 'react-dom/client'를 import 하는것을 볼 수 있다.

두개의 차이점은 무엇이고 굳이 'react'에서 'react-dom'을 분리한 이유는 무엇일까?

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

import './index.css';
import App from './App';

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

 

React

2022.10.11 - [React] - Why React?

Why React?

 

위 게시글을 보면 React에 대해 이렇게 정의하는 것을 볼 수 있다.

지금은 Meta가 된 Facebook이 만든 자바스크립트의 UI 라이브러리이다.

 

다시 말하면 React는 단순히 그냥 UI 라이브러리일 뿐이며, 웹에서만 쓰인다는 것은 아니다.

 

 

 

React-Dom

React document 에서 React-Dom에 대한 설명은 아래와 같이 나와있다.

The react-dom package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside the React model if you need to.

react-dom 패키지는 DOM 관련 특정 메소드를 제공하고, 최상위 level에서 사용될 수 있으며, 필요시 React model 밖으로 나갈 수 있게 해준다고 적혀있다.

 

솔직히 잘 이해가 가는 문구는 아니다...

 

내가 이해한대로 다시 정리해보자면, react-dom은 실제 브라우저의 DOM을 조작하여 렌더링 할 수 있게 해주는 것이다.

물론 실제 DOM이 렌더링 되려면 Virtual DOM의 최종 결과를 가지고 바뀐 부분만 실제 DOM에서 렌더링 하는 중간과정이 있지만, 브라우저의 DOM에 접근하여 우리가 보는 화면을 렌더링 할 수 있게 해준다고 생각하면 될 것 같다.

 

 

React와 React-Dom이 나뉜이유?

위에서 말했듯이 React는 단순히 UI 라이브러리일 뿐이다.

따라서 웹에 국한되지 않으며, 필요하다면 다른 곳에서도 쓰일 수가 있다.

 

하지만 React-DOM은 웹에서 React를 사용하여 화면을 렌더링 할 수 있게 해주는 것이다.

 

React는 도구이고, React-DOM은 특정 사용처에 대한 도구 사용방법이라고 생각하면 편할 것 같다.