JSX란?

 

JSX는 JavaScript XML의 약자로 자바스크립트를 확장 시킨 문법이기 때문에 모든 자바스크립트 문법을 지원하고 여기에 HTML과 XML을 같이 사용하는 형태다.

 

리액트는 컴포넌트 기반으로 UI를 구성하는데, 이 컴포넌트를 작성할 때 JSX를 사용하면 HTML태그와 유사한 문법으로 UI 구조를 쉽게 정의할 수 있음.

JSX는 최종적으로 브라우저가 이해할 수 있는 순수 자바스크립트로 변환되고 이 변환 작업은 Babel 같은 트랜스파일러에 의해 이루어지며, 실제로 브라우저는 변호나된 자바스크립트 코드를 실행한다.

 

JSX 사용법

const element = <h1>Hello, world!</h1>;

 

위와 같은 JSX는 Babel에 의해 다음과 같이 변환된다.

const element = React.createElement('h1', null, 'Hello, world!');

 

 

html 중간에 자바스크립트 코드 삽입하기

import React from 'react';
import ReactDOM from 'react-dom';

// 컴포넌트 정의
function Greeting(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

// 컴포넌트 사용
const element = <Greeting name="철수" />;

ReactDOM.render(element, document.getElementById('root'));

 

위와 같이 XML/HTML코드 중간에 자바스크립트 코드를 사용하려면 중괄호{}를 써서 묶어주면 된다.

 

태그 속성에 값을 넣고 싶을 경우

const element = <Greeting name="철수" />;

위와 같이 큰따옴표 안에 문자열을 넣거나

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1 style={{ color: 'blue' }}>안녕하세요, 리액트!</h1>;

ReactDOM.render(element, document.getElementById('root'));

중괄호 사이에 값을 작성한다.