JavaScript in JSX with Curly Braces

마크업 내에서 동적 속성을 참조하고 싶을 수 있다. 예를 들어 어떤 태그의 속성에 JavaScript 변수의 값을 넣고 싶을 수도 있다. 그럴 때 중괄호를 사용하면 된다.

 

 

따옴표로 문자열 전달

JSX에 문자열 속성을 전달하려면 작은따옴표나 큰따옴표로 묶어야 한다.

 

 

위의 img 태그에서 src와 alt는 문자열로 전달이 된다. 하지만 문자열들을 따로 변수로 저장한 뒤에 긴 문자열 대신 변수로 삽입하고 싶다면 중괄호를 이용해서 아래와 같이 하면 된다.

 

 

"double curlies" 사용: JSX의 CSS 및 기타 객체

문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX에서 객체를 전달할 수도 있다. JavaScript에서 객체를 표현할 때는 {} 안에 key와 value 값을 감싸기 때문에 JSX로 객체 자체를 넘겨줄 경우에는 {}로 한번 더 감싸야 한다. 따라서 중괄호로 두번 감싸주어야 한다.

 

이러한 경우는 인라인 CSS 스타일을 사용할 때 볼 수 있다. 물론 이런 경우는 거의 없고 스타일을 따로 관리하는 경우가 대부분이지만 만약 사용하게 된다면 다음과 같이 나타낼 수 있다.

 

 

이 때 style 속성은 camelCase로 작성한다는것에 주의해야 한다. 예를들어 HTML에서는 background-color 속성으로 배경색을 정할 수 있지만, JSX에서는 backgroundColor로 적어주어야 한다.

 

 

JavaScript 객체 및 중괄호로 더 재미있게

여러 표현식을 하나의 객체에 선언하고 JSX에서 참조하도록 할 수 있다.