React - JSX

[ JSX ]

 

JSX는 JavaScript XML의 약자로 자바스크립트를 확장한 문법입니다. JSX는 React의 "엘리먼트"를 생성합니다.

 

[ JSX 표현식 ]

 

JSX의 중괄호로 자바스크립트 데이터를 HTML에 포함시킬 수 있습니다

 

< 예 >

 

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>

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

 

 

JSX 중괄호 안에는 모든 JavaScript 표현식을 넣을 수 있습니다. 사칙연산, 객체 속성, 함수 호출식도 중괄호 안에 넣을 수 있습니다.

 

아래의 예는 함수 호출 결과를 HTML <h1> 엘리먼트에 포함시키는 예시입니다

 

 

function formatName(user) {
	return user.firstName + ' ' + user.lastName;
}

const user = {
	firstName: 'Harper',
    lastName: 'Perez'
};

const element = (
	<h1>
    	Hello, {formatName(user)}!
    </h1>
);

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