2.2.4 표현식은 중괄호 안에서 사용하기

JSX에서는 중괄호({}) 안에 자바스크립트 표현식을 넣어 사용할 수 있습니다. 이 덕분에 화면에 표시할 내용을 동적으로 만들 수 있습니다.

다음 코드는 {10 + 20}이라는 자바스크립트 표현식을 계산한 뒤 결과인 30을 화면에 표시합니다.

<h1>result: {10 + 20} </h1>

그림 2-2 자바스크립트 표현식 사용 결과

JSX 안에서 삼항 연산자(조건 ? 참일 때 : 거짓일 때)도 사용할 수 있습니다. 다음 코드는 조건 10 < 20이 참(true)이므로 ‘10이 더 작다’가 화면에 표시됩니다.

<h1>{10 < 20 ? "10이 더 작다" : "20이 더 크다"}</h1>