목차
JSX 정의 JSX 코딩 JSX 문법 - 표현식 입력은 { } 중괄호 사용 JSX 문법 - HTML 코드 블럭 입력은 () 소괄호 사용 JSX 문법 - 하나의 최상위 요소로 감싸야 함 JSX 문법 - 요소 닫기
JSX 정의
1. JSX (= JavaScript XML) 의미.
2. JSX 사용하면, React에서 HTML 쉽게 작성/추가 가능.
JSX 코딩
1.
JSX 사용하면 JS 안에 HTML 요소를 쓰기 가능하며,
쓰여진 HTML 요소를 JS의 createElement()/appendChild() 메서드 없이도 DOM에 배치 가능.
2.
JSX는 HTML 태그를 React 요소로 변환.
3.
JSX를 사용할 필요는 없지만,
JSX를 사용하면 React 애플리케이션을 더 쉽게 작성 가능.
4.
JSX 사용하면 JavaScript 코드 안에 직접 HTML을 작성 가능.
JSX는 ES6 기반 JS 언어의 확장이며 런타임시 일반 JS로 변환됨.
※ index.js 작성 방법 차이 예
[JSX 사용 O] index.js
import React from 'react';
import ReactDOM from 'react-dom';
const hz = <h1>Homzzang.com</h1>;
ReactDOM.render(hz, document.getElementById('root'));
[JSX 사용 X] index.js
import React from 'react';
import ReactDOM from 'react-dom';
const hz = React.createElement('h1', {}, 'Homzzang.com');
ReactDOM.render(hz, document.getElementById('root'));
JSX 문법 - 표현식 입력은 { } 중괄호 사용
JSX 사용 시, 표현식 은 중괄호인 { } 안에 넣어야 함.
※ 표현식 예: React 변수, 속성 또는 기타 유효한 JS 표현식 등.
※ JSX는 표현식 실행 후, 결과를 반환.
[예제] index.js
import React from 'react';
import ReactDOM from 'react-dom';
const hz = <h1>React는 JSX 사용 시, {5 + 5} 배 편함.</h1>;
ReactDOM.render(hz, document.getElementById('root'));
JSX 문법 - HTML 코드 블럭 입력은 () 소괄호 사용
JSX 사용 시, HTML 코드 블럭 은 소괄호인 ( ) 안에 넣어야 함.
[예제] 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'));
JSX 문법 - 하나의 최상위 요소로 감싸야 함
HTML 코드 블럭은 하나의 최상위 요소로 감싸야 함.
(예) 2개의 <h1> 태그 삽입 경우, <div> 등으로 감싸야 함.
[예제] index.js
import React from 'react';
import ReactDOM from 'react-dom';
const hz = (
<div>
<h1>홈짱닷컴</h1>
<h1>Homzzang.com</h1>
</div>
);
ReactDOM.render(hz, document.getElementById('root'));
PS. HTML이 올바르지 않거나 상위 요소 누락 시, JSX에서 오류 발생.
JSX 문법 - 요소 닫기
JSX는 XML 규칙에 따라, HTML 요소를 올바르게 닫아야 함.
즉, 닫는 태그가 없이 단독 사용 태그 경우, / 기호 넣어야 함.
[예제] index.js
import React from 'react';
import ReactDOM from 'react-dom';
const hz = <input type="text" / >;
ReactDOM.render(hz, document.getElementById('root'));
PS. HTML이 제대로 안 닫히면 JSX에서 오류 발생.
