React-DOM 공식문서
React를 사용하면 React-Dom을 볼 수 있는데
아래의 공식사이트에서 자세한 것을 알 수 있습니다.
ReactDOM – React
A JavaScript library for building user interfaces
ko.reactjs.org
내가 이해한 React-DOM은?
리엑트는 순수 자바스크립트로 컴포넌트를 만들어 브라우저를 구성합니다.
그런데 브라우저는 CSS, HTML 그리고 순수 자바스크립트를 이용할 수 있습니다.
즉, 위의 3 가지만 브라우저는 이해합니다.
그런데 리엑트를 보면 순수 자바스크립트와 다른 문법을 볼 수 있습니다.
이러한 다른 부분은 Babel 을 통해 순수 자바스크립트로 변환되어야 합니다. 그래야 브라우저가 이해할 수 있으니까요!
그런데 바벨을 Package.json 안에서 찾을 수 없습니다. 그 이유는 yarn.lock 에 있는데 패키지 잠금 파일입니다.
그리고 난 후 HTML 과 연결하는 작업이 필요한데 그 작업을 React-Dom 이 합니다!!
드디어 React-Dom 나왔네요!
src 폴더 안에 index.js에 가면 아래의 코드를 볼 수 있습니다.
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./app";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
react-dom 라이브러리를 에서 ReactDom 을 사용해 render라는 함수를 실행합니다.
함수안에 들어갈 것은 공식문서에서 아래와 같이 나옵니다.
ReactDOM.render(element, container[, callback])요소로 리엑트 태그를 사용하여 App 태그가 있고
container 부분에 id가 root인 것을 가르키고 있습니다.
해당 요소는 연결해야 할 HTML 입니다. public 폴더 안의 Html 파일로 가면 아래의 div 태그 하나를 볼 수 있습니다.
<div id="root"></div>id가 root 인데 자바스크립트와 연결해주는 요소입니다.
그래서 연결된 곳에 우리가 만든 컴포넌트들이 보여줄 것입니다.
이 곳이 가장 최상 위 컴포넌트이고 DOM인 트리 구조로 되어 있습니다.
원래... DOM 은 문서 객체 모델로써 <html>, <body>, <div> 등이 문서 객체입니다.
이러한 태그들은 자바스크립트로 조작가능한데 위와 같은 문서 객체에 자바스크립트를 이용하여 수정 가능한 객체라고 이해하였습니다.
하지만, <App /> 과 같은 태그는 일반 자바스크립트에서 볼 수 없는 문서 객체입니다.
그래서 가상의 DOM 을 이용하여 컴포넌트들을
실제 브라우저가 이해할 수 있도록 실제 HTML DOM에 연결할 수 있도록 합니다.
'React' 카테고리의 다른 글
| [React] React 에서 Font Awesome 을 사용하기 (0) | 2021.12.21 |
|---|---|
| [React] 컴포넌트 만들기 및 바벨 사용 (0) | 2020.02.27 |
| [React] 함수형 컴포넌트와 클래스 컴포넌트 (0) | 2019.12.28 |
| [React] NPX 를 이용한 React 설치 (0) | 2019.12.18 |
| [Router] React Router 사용하기 (0) | 2019.09.07 |
