- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>- 위의 코드에서 <div id="root"></div>가 React 애플리케이션을 렌더링할 컨테이너 역할을 한다.
1. JavaScript 파일 작성 : React 애플리케이션의 JavaScript 파일을 작성한다. 이 파일은 React 컴포넌트를 정의하고, 이 컴포넌트를 'ReactDOM'을 사용하여 'index.html' 파일의 컨테이너에 렌더링 하는 역할을 한다.
2. 'ReactDOM.render' 또는 'ReactDOM.createRoot' 사용 : 'ReactDOM'은 React 엘리먼트를 'index.html' 파일의 컨테이너에 렌더링하는 메서드를 제공한다. React18부터는 'createRoot' 메서드를 사용하여 렌더링을 시작할 수도 있다.
- 임의의 js 파일
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // React 컴포넌트 파일을 임포트
const root = document.getElementById('root');
const reactRoot = ReactDOM.createRoot(root);
reactRoot.render(<App />);- 위 코드를 통해 'ReactDOM.render'를 통해 'index.html' 파일의 컨테이너에 렌더링한다. 'getElementById'를 사용하여 'root' 컨테이너를 찾아서 렌더링 대상으로 지정한다.
- 즉, 'ReactDOM'을 사용하여 'index.html'의 특정 엘리먼트(일반적으로 '<div id="root"></div>')에 React 애플리케이션을 렌더링한다. 이렇게 함으로써 React가 브라우저 환경에서 동작하게 된다.
728x90
'Programming > React' 카테고리의 다른 글
| React - React.js (JSX, State, Props) (0) | 2023.09.15 |
|---|---|
| React - React.js 기초 (설치 및 실행) (0) | 2023.09.14 |
| React - Node.js 설치 및 사용 (기본, npm) (0) | 2023.09.14 |
| Javascript - 응용(동기&비동기, Promise, async&await, API 호출하기) (0) | 2023.09.11 |
| Javascript - 기본, 응용(배열 내장 함수, Truthy & Falsy, 삼항 연산자, 단락회로 평가, 조건문 업그레이드, 비 구조화 할당, Spread 연산자) +a (0) | 2023.09.11 |