목차
React 목표 ReactDOM.render() 구문 HTML 코드 root 노드
React 목표
React 목표는 여러 방법으로 웹페이지에 HTML을 렌더링하는 것임.
1.
React는 렌더링 작업을 위해, ReactDOM.render() 함수 사용 함.
2.
ReactDOM.render() 함수 사용하려면, 아래 라이브러리 필요함.
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render() 구문
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render( html_code, html_element )
[매개변수]
html_code
필수. 입력할 HTML 코드.
html_element
필수. html_code 넣을 위치.
[반환값]
html_code를 html_element 안에 표시한 HTML 코드.
[예제] ※ 아래 1~3
<p>홈짱닷컴 (Homzzang.com)</p> 코드를 <div id="root"></div> 요소 안에 표시.
1. C:\Users\사용자명\hz\src\index.js 파일 생성.
import React from 'react';
import ReactDOM from 'react-dom';
const p = <p>홈짱닷컴 (Homzzang.com)</p>;
ReactDOM.render(p, document.getElementById('root '));
2. C:\Users\사용자명\hz\public\index.html 생성.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>홈짱닷컴</title>
</head>
<body>
<div id="root "></div>
</body>
</html>
3. CMD 모드 아래 경로에서 아래 명령어 실행.
C:\User\사용자명>cd hz
C:\User\사용자명\hz>npm start
HTML 코드
React는 JSX (= JS 구문 안에 HTML 코드 작성 가능) 코드 사용.
[예제]
1. C:\Users\사용자명\hz\src\index.js 파일 생성.
import React from 'react';
import ReactDOM from 'react-dom';
const hz = (
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
);
ReactDOM.render(hz, document.getElementById('root'));
※ 2 ~ 3. 나머지 과정은 위와 동일.
root 노드
위 예제에서, 아래 부분에 해당하는 부분을 root 노드라 함.
<div id=" root "></div>
1. root 노드는 결과를 표시하려는 HTML 요소 말함.
2. React에서 관리하는 콘텐츠의 컨테이너 역할 수행.
3. 반드시 <div> 요소일 필요는 없음.
4. 반드시 id = 'root'일 필요는 없음.
5. 즉, root 노드는 사용자 임의로 생성 가능 .
[예제]
1. C:\Users\사용자명\hz\src\index.js 파일 생성.
import React from 'react';
import ReactDOM from 'react-dom';
const p = <p>홈짱닷컴 (Homzzang.com)</p>;
ReactDOM.render(p, document.getElementById('hz '));
2. C:\Users\사용자명\hz\public\index.html 생성.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>홈짱닷컴</title>
</head>
<body>
<header id="hz "></header>
</body>
</html>
최신댓글