React - JSX (= JavaScript XML)

목차

1. JSX 정의
2. JSX 코딩
3. JSX 문법 - 표현식 입력은 { } 중괄호 사용
4. JSX 문법 - HTML 코드 블럭 입력은 () 소괄호 사용
5. JSX 문법 - 하나의 최상위 요소로 감싸야 함
6. 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에서 오류 발생.