React와 ReactDOM
React와 ReactDOM은 함께 작업하여 사용자 인터페이스를 구성한다.
React
사용자 인터페이스를 구성하는 컴포넌트를 정의하는 라이브러리이다.
이 컴포넌트는 자바스크립트 코드로 작성되며, 최종적으로 HTML로 변환되어 브라우저에 표시된다.
ReactDOM
React 컴포넌트를 실제 DOM에 렌더링하는 역할을 한다.
React가 작성한 UI를 HTML로 변환하고 이를 브라우저의 DOM에 삽입한다.
index.html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
<div id="root"></div>: 이 요소는 React 컴포넌트가 렌더링될 빈 공간이다.
ReactDOM은 이 root라는 ID를 가진 요소를 찾아 그 안에 React 컴포넌트를 삽입한다.
index.js 파일
//React 라이브러리에서 React를 가져온다.
//이 라이브러리는 컴포넌트를 정의하고 관리하는 데 사용된다.
import React from 'react';
//ReactDOM 라이브러리에서 ReactDOM을 가져온다
//이 라이브러리는 React 컴포넌트를 실제 DOM에 렌더링한다.
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
//ReactDOM.render()
//이 함수는 두 개의 인수를 받는다
//1. 렌더링할 React 요소 (<App /> 컴포넌트)
//여기서 React.StrictMode는 개발 모드에서 추가적인 검사와 경고를 제공한다
//2. React 요소를 렌더링할 DOM 요소
// (document.getElementById('root'))
// 이 DOM 요소는 index.html의 <div id="root"></div>와 연결된다.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
이 코드가 실행되면, ReactDOM은 root라는 ID를 가진 <div>를 찾아서, 그 안에 <App /> 컴포넌트를 삽입한다.
4. App.jsx 파일
import React from 'react';
import './App.css';
function App() {
return <h1>hello :)</h1>;
}
export default App;- App 컴포넌트: 이 컴포넌트는 UI를 정의한다. 이 경우에는 <h1>hello :)</h1> 텍스트를 반환한다.
- export default App;: App 컴포넌트를 다른 파일에서 사용할 수 있도록 내보낸다.
- App.jsx에서 App 컴포넌트를 작성한다. 이 컴포넌트는 JSX로 UI를 정의한다.
- index.js에서 ReactDOM.render()를 호출하여 App 컴포넌트를 실제 DOM에 렌더링한다.
- 이 과정에서 App 컴포넌트는 HTML로 변환되어 <div id="root"></div> 안에 삽입된다.
- 브라우저는 이 HTML을 렌더링하여 사용자가 화면에서 hello :)를 볼 수 있도록 한다.
'CS > JAVASCRIPT' 카테고리의 다른 글
| REACT 함수형 클래스와 컴포넌트 (0) | 2024.08.15 |
|---|---|
| AJAX(Asynchronous JavaScript and XML) (0) | 2024.08.14 |
| REST API (0) | 2024.07.18 |
| JSON (0) | 2024.06.28 |
| var, let, const (0) | 2024.06.28 |