JSX 표현식에대해
- JSX 표현식. 여기서 표현식이란 뭘까요? 표현식이란,
값으로 확인 될 수 있는 유효한 자바스크립트 코드를 말합니다.
예를 들어 보자면,
"JavaScript" , 1+2 , 변수로 지정된 code, new Date()등입니다.
이러한 표현식들은 각각 문자열이나 숫자 등의 값을 반환하며, JSX에서는 이러한 표현식들을
{} 이 중괄호에 묶어서 쓸 수 있습니다.
const element = <div>I have {1+2} bananas</div>;
//위의 JSX는 결국,
const element = <div>I have 3 bananas</div> 인것입니다하지만 이렇게 작동하기 위해서는 무조건 자바스크립트 코드가 {} 안에 들어가야만 합니다.
변수의 경우도 마찬가지입니다.
const fruits = {
kind: banana,
quantity: 15
};
const element = <p className="fruit">delicious {fruits.kind}</p>이번엔 JSX의 속성의 표현식에 대해서도 알아보겠습니다.
const class = "great"
const element = <div className={class}></div>
위의 코드는,
const element = <div className="great"></div>
와 같습니다. 이렇듯이, className이나 tabIndex같은 JSX의 속성에 표현식을 쓸 경우,
만약 문자열이라면 ""안에, 표현식으로 하고 싶을 경우 {}로 감싸서 쓰면 됩니다.
요약
- JSX의 표현식은 중괄호로 감싸져야 한다. {표현식}
- 만약 속성의 값이 문자열이면, 따옴표로 감싼다 "",''
- 만약 속성의 값이 표현식이면 중괄호로 감싼다 {}
DreamingCoder