const element = (<h1 className='greeting'>Hello, World!</h1>);
const element = React.createElement('h1', {className: 'greeting'}, 'Hello, World');
JSX의 중괄호 안에는 유요한 모든 JavaScript 표현식을 넣을 수 있다.
const name = 'Vanlan';
const element = <h1>Hello, {name}</h1>;
JSX도 표현식이다.
function getGreeting(user) {
if(user) {
return (<h1>Hello, {user}!</h1>);
}
}
// JSX는 if구문, for loop안에서 사용 및 변수에 할당이 가능하고 인자로 받아들인 후 함수로 부터 반환 할 수 있다.
조건부 렌더링
JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나, AND 연산자를 이용한다.
반면, if문은 사용할 수 없다. (사용해야 한다면 즉시 실행함수 표현(IIFE)를 사용해야 한다.)
// 삼항 연산자를 이용
function App() {
return (
<div>
{
1 + 1 === 2 ? (<div>True</div>) : (<div>False</div>);
}
</div>
);
}
// AND 연산자를 이용
function App() {
return (
<div>
{
1 + 1 === 2 && (<div>True</div>);
}
</div>
);
}
// if문 사용(즉시 실행 함수 표현(IIFE))
function App() {
const value = 1;
return (
<div>
{
(function() {
if(value === 1) return (<div>하나</div>);
if(value === 2) return (<div>둘</div>);
if(value === 3) return (<div>셋</div>);
})();
}
</div>
);
}
JSX속성 정의
속성에 따옴표를 이용하여 문자열 리터럴을 정의할 수 있다.
const element = <a href="https://www.reactjs.org">link</a>;
중괄호를 사용하여 속성에 Javascript 표현식을 삽입할 수 있다.
const element = <img src={user.url} />;
단, Javascript의 예약어와 동일한 속성명은 camelCase프로퍼티 명명 규칙을 사용한다.
// index 대신 tabIndex 사용
<div className='App' tabIndex='0'></div>
// class 대신 className 사용
<img src={logo} className='App-logo' alt='logo' />
// for 대신 htmlFor 사용
<input type='checkbox' name='agreement' id=''agreemnt-el></input>
<label htmlFor='agreement-el'>동의</label>
JSX로 자식 태그 정의
// 태그가 비어있다면 XML 처럼 />를 이용하여 바로 닫아주어야 한다.
const element = <img src={user.url} />;
// 자식 태그를 포함 할 수 있다.
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);