1. React render() 기본 예제
- index.js (src 폴더)
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));- index.html (public 폴더)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<header id="sandy"></header>
</body>
</html>- 위 코드 2개를 실행 후 결과를 보면 <p>Hallo</p> 가 <header> 밑에 추가 되어 있다.
2. React JSX(JavaScript XML)
- JSX를 사용하면 React에서 HTML을 더 쉽게 작성하고 추가할 수 있다.
- JSX를 사용하면 JavaScript로 HTML 요소를 작성하고 createElement(), appendChild() 및 '/' 없이 DOM에 배치 가능.
- JSX는 HTML 태그를 React 로 변환한다.
- JSX는 ES6 기반 JavaScript 언어의 확장이며 런타임시 일반 JavaScript로 변환된다.
-
JSX를 사용한 예
import React from 'react';
import ReactDOM from 'react-dom';
const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));-
JSX를 사용하지 않은 예
import React from 'react';
import ReactDOM from 'react-dom';
const myElement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myElement, document.getElementById('root'));
3. JSX의 표현식
- JSX를 사용하면 중괄호'{ }' 안에 표현식을 작성할 수 있다.
- 표현식은 React 변수, 속성 또는 기타 유효한 JavaScript 표현식일 수 있다.
JSX는 표현식을 표현식을 실행하고 결과를 반환한다.
import React from 'react';
import ReactDOM from 'react-dom';
const addElement = <h1>React is {5 + 5} times better with JSX</h1>;
ReactDOM.render(addElement, document.getElementById('root'));
4. HTML Block
- 여러 줄에 HTML을 작성하려면 아래와 같이 괄호'( )' 안에 작성한다.
import React from 'react';
import ReactDOM from 'react-dom';
const htmlBlockElement = (
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
);
ReactDOM.render(htmlBlockElement, document.getElementById('root'));
5. 하나의 최상위 Element (One Top Level Element)
- HTML 코드는 반드시 한 개의 최상위 Element에 랩핑(wrapped) 되어 있어야 한다.
- 아래와 같이 <h1> 요소를 2개 쓰고 싶다면 <div> 한 개의 부모를 만들고 안의 자식 요소로 있어야 한다.
- HTML이 올바르지 않거나 HTML에 Top Level Element가 누락된 경우 JSX에서 오류가 발생한다.
import React from 'react';
import ReactDOM from 'react-dom';
const htmlBlockElement = (
<div>
<h1>I am a Header.</h1>
<h1>I am a Header too.</h1>
</div>
);
ReactDOM.render(htmlBlockElement, document.getElementById('root'));
6. Element는 반드시 닫혀야 한다.
- JSX는 XML 규칙을 따르므로 HTML 요소를 올바르게 닫아야 한다.
- 이 또한 제대로 닫히지 않으면 JSX에서 오류가 발생된다.
const myElement = <input type="text" />'Language > React.js' 카테고리의 다른 글
| [React] React State (0) | 2021.01.24 |
|---|---|
| [React] 컴포넌트 Prop (0) | 2021.01.24 |
| [React] React 컴포넌트 (0) | 2021.01.24 |
| [React] React ES6 (0) | 2021.01.23 |
| [React] React의 개요 (0) | 2021.01.23 |