const element = <h1>Hello, world!</h1>;위의 문법을 JSX라 하며 JavaScript를 확장한 문법이다. 자바스크립트의 모든기능이 포함되어있다.
JSX는 React element를 생성한다. 필수적인 요소는 아니지만 자바스크립트 코드안에서 UI관련 작업을 할 때 시각적으로 더 도움이 된다.
JSX에 표현식 포함하기
// html
<body>
<div id="root"></div>
</body>// js
const name = 'Ga Young';
const element = <h1>Hello, {name} </h1>
ReactDOM.render(
element,
document.getElementById('root')
);함수 호출해서 엘리먼트 포함시키기
function formatName(user) {
return `${user.firstName} ${user.lastName}`
}
const user = {
firstName: 'Ga young',
lastName:'Lee'
}
const element = (
<h1>
Hello, {formatName(user)} 🙂
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);컴파일이 끝나면, JSX 표현이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다.
즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다.
function getGreeting(user) {
if(user) {
return <h1>Hello, {formatName(user)}🙂</h1>
}
return <h1>Hello, Stranger.</h1>
}속성 정의
속성에 따옴표를 이용해 문자열 리터럴을 정의 할 수 있다.
const element = <div tabIndex="0"></div>;중괄호를 사용하여 어트리뷰트에 js포현식을 삽입할수 있다.
const element = <img src={user.avataUrl} />JSX는 js에 가깝기 때문에 camelCase 프로퍼티 명명 규칙을 사용한다. ex)
className,tabIndex..
자식 정의 하기
태그가 비어있다면 닫기 태그(/)를 사용해 준다
const element = <img src={user.avataUrl}/>JSX태그는 자식을 포함할 수 있다.
const element5 = (
<div>
<h1>Hello</h1>
<h2>Good to see you here.</h2>
</div>
)객체로 표현하기
Babel은 JSX를 React.createElement() 호출로 컴파일한다.
다음 두 예시는 동일하다.
const element = (
<h1 className='greeting'>
Hello, world!
</h1>
)
-----------------------------------------
const element = React.createElement(
'h1',
{className:'greeting'},
'Hello, world!'
)React.createElement() 는 버그가 없는 코드를 작성하는데 도움이 되도록 몇가지 검사를 수행하는데, 기본적으로 다음과 같은 객체를 생성한다.
// 주의: 단순화된 코드 이다.
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};위와 같은 객체를 "React 엘리먼트" 라고 하며, 이를 화면에 표시하려는 항목에 대한 설명이다.
React는 이러한 객체를 읽은 후 DOM을 구성하고 최신으로 유지하는 데 이러한 객체를 사용한다.
참고
해당 포스팅은 실전 리엑트 공식 홈페이지 https://ko.reactjs.org/
리엑트 자습서 https://ko.reactjs.org/docs/introducing-jsx.html 에서 참고하여 작성했습니다.
