출처: https://www.codecademy.com
JSX 코드 내 자바스크립트 코드 사용 - 중괄호
JSX 코드는 자바스크립트 코드보단 HTML코드에 가깝기 때문에 <h1> 2 + 3 </h1>
같은 코드를 그냥 text로 간주하여 ‘2 + 3’ 을 화면에 표시한다.
그렇다면 JSX코드 사이에 자바스크립트 코드를 이용하고 싶을 땐?! { } 중괄호 를 사용하면 된다.
import React from 'react';
import ReactDOM from 'react-dom';
// Write code here:
ReactDOM.render(
<h1>2 + 3 = {2 + 3}</h1>,
document.getElementById('app')
);
화면에 ‘2 + 3 = 5’ 가 출력됨
## JSX 에서의 조건문의 사용
JSX코드에 if 문을 단순 삽입하는것은 불가능하다.
if와 else 키워드가 JSX코드에 끼워져 들어가는것이 아니라 바깥에 감싸듯이 위치해 있어야 한다.
예) 오류
(
<h1>
{
if (purchase.complete) {
'Thank you for placing an order!'
}
}
</h1>
)
–
예) 정상
import React from 'react';
import ReactDOM from 'react-dom';
function coinToss() {
// This function will randomly return either 'heads' or 'tails'.
return Math.random() < 0.5 ? 'heads' : 'tails';
}
const pics = {
kitty: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg',
doggy: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg'
};
let img;
// if/else statement begins here:
if (coinToss() === 'heads') {
img = (
<img src={pics.kitty} />
);
} else {
img = (
<img src={pics.doggy} />
);
}
ReactDOM.render(img, document.getElementById('app'));
React에서의 Ternary Operator(삼항연산자) 사용
삼항연산자를 사용하면 JSX코드 내에서 조건문을 사용하는것이 가능하다!
그렇기 때문에 React에서 삼항연산자가 자주 쓰이므로 확인해두자.
const headline = (
<h1>
{ age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff' }
</h1>
);
&& Operation
또한, && 연산자를 조건문으로 JSX코드 내에서 사용할 수 있다.
const tasty = (
<ul>
<li>Applesauce</li>
{ age > 15 && <li>Brussels Sprouts</li> }
{ age > 20 && <li>Oysters</li> }
{ age > 25 && <li>Grappa</li> }
</ul>
);
위 코드는 age > 숫자
에 해당하는 값이 참일 경우에만 <li>
태그의 내용이 보여지게 된다.
&& 연산자는 참일경우에만 수행하고 거짓을 경우엔 아무 액션도 취하지 않는 경우에 가장 유용하게 사용된다.