💡react-dom 이해하기
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는 순수 자바스크립트이고, 이 자바스크립트를 이용해 컴포넌트를 만들어나간다.
실제로 브라우저가 이해할 수 있는 것은 html, css, JavaScript 뿐이며, 이것들만 이용할 수 있다.
그래서 위의 코드와 같은 식은 바벨을 이용해서 순수 자바스크립트로 변환이 된다.
그리고 나서 우리가 만든 컴포넌트를 html과 연결하는 작업을 해줘야 하는데 이것을 해주는 것이 바로 react이다.
그래서 사용자에게 궁극적으로 배포되어지는 것은 index.html이다.
index.html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>body에서 보면 <div> 태그 달랑 하나가 있는 걸 볼 수 있다.
<div id="root"></div>이것은 root라는 id를 이용해서 우리가 JavaScript와 연결해줄건데 그것을 가능하게 하는 것이 react-dom이라고 아까 언급했다.
다시 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')
);import ReactDOM from 'react-dom';➡️ react-dom이라는 라이브러리에서 ReactDOM이라는 클래스를 import 해온다.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,➡️ 가져온 ReactDOM이라는 클래스에 있는 render 함수를 이용해서
document.getElementById('root')
);➡️ document(페이지)에 있는 id가 root라는 요소를 가져와서
즉, index.html에 있는 <div id="root"></div>
이 요소에 우리의 root 컴포넌트를 연결시켜준다.
💡 그래서, render 함수가 호출이 되면 index.html에 있는 <div id="root"></div> 여기 이 부분에 우리 컴포넌트가 연결이 되는 것이다!
