Overview
JSX를 사용하면 JavaScript 파일 내에 HTML과 유사한 마크업을 작성하여 렌더링 로직과 컨텐츠를 같은 위치할 수 있다. 경우에 따라 약간의 JavaScript 로직을 추가하거나 해당 마크업 내에서 동적 속성을 참조하고 싶을 수 있다. 이때 JSX에서 중괄호를 사용하여 JavaScript창을 열 수 있다.
Passing strings with quotes
JSX에 문자열 속성을 전달하려면 작은따옴표나 큼따옴표로 묶어야한다.
export default function Avatar() {
return (
<img
className="avatar"
src="https://i.imgur.com/7vQD0fPs.jpg"
alt="Gregorio Y. Zara"
/>
);
} "https://i.imgur.com/7vQD0fPs.jpg" 과 "Gregorio Y. Zara"이 문자열로 전달된다.
하지만 src 나 alt 텍스트를 동적으로 지정하려면 어떻게 해야할까? "" 를 { 와 } 로 대체하여 JavaScript의 값을 사용할 수 있다.
export default function Avatar() {
const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
const description = 'Gregorio Y. Zara';
return (
<img
className="avatar"
src={avatar}
alt={description}
/>
);
}이미지를 둥글게 만드는 "avatar" CSS 클래스 이름을 지정하는 className="avatar" 와 avatar 라는 JavaScript변수의 값을 읽는 src={avatar} 사이의 차이점에 주목해라. 중괄호를 사용하면 마크업에서 바로 JavaScript로 작업을 할 수 있기 때문이다.
Using curly braces: A window into the JavaScript world
JSX는 JavaScript를 작성하는 특별한 방법이다. 즉, 내부에서 중괄호 { } 와 함께 JavaScript를 사용할 수 있다. 아래 예제는 먼저 과학자의 이름인 name 을 선언한 다음 <h1> 안에 중괄호로 넣는다.
export default function TodoList() {
const name = 'Gregorio Y. Zara';
return (
<h1>{name}'s To Do List</h1>
);
}
name 값을 'Gregorio Y. Zara' 에서 'Hedy Lamarr' 로 변경해봐라. 목록 제목이 어떻게 변경되는지 확인했니?
formatDate() 와 같은 함수 호출을 포함하여 모든 JavaScrip 표현식은 중괄호 사이에서 작동한다.
const today = new Date();
function formatDate(date) {
return new Intl.DateTimeFormat(
'en-US',
{ weekday: 'long' }
).format(date);
}
export default function TodoList() {
return (
<h1>To Do List for {formatDate(today)}</h1>
);
}Where to use curly braces
JSX 내에서 중괄호는 가지 방법으로만 사용할 수 있다.
- JSX 태그 바로 안에 있는 텍스트 :
<h1>{name}'s To Do List</h1>는 작동하지만,<{tag}>Gregorio Y. Zara's To Do List</{tag}>는 작동하지 않는다. =기호 바로 뒤에 오는 속성으로 :src={avatar}는avatar변수를 읽지만src="{avatar}"는"{avatar}"문자열을 전달한다.
Using “double curlies”: CSS and other objects in JSX
문자열, 숫자, 다른 JavaScript 표현식 외에 JSX에서 객체를 전달할 수도 있다. 객체는 { name: "Hedy Lamarr", inventions: 5 } 와 같이 중괄호로 표시된다. 따라서 JSX에서 JS객체를 전달하려면 다른 중괄호 쌍 person={{ name: "Hedy Lamarr", inventions: 5 }} 으로 객체를 감싸야한다.
JSX의 인라인 CSS스타일에서 볼 수 있다. 리액트는 인라인 스타일 사용할 것을 요구하지 않는다.(CSS 클래스는 대부분의 경우에 잘 작동한다.) 하지만 인라인 스타일이 필요한 경우 객체를 style 속성에 전달한다.
export default function TodoList() {
return (
<ul style={{
backgroundColor: 'black',
color: 'pink'
}}>
<li>Improve the videophone</li>
<li>Prepare aeronautics lectures</li>
<li>Work on the alcohol-fuelled engine</li>
</ul>
);
}backgroundColor 와 color 를 바꿔봐라.
다음과 같이 작성할 때 중괄호 안에 있는 JavaScript 객체를 실제로 볼 수 있다.
<ul style={
{
backgroundColor: 'black',
color: 'pink'
}
}>다음에 JSX에서 {{ 와}} 를 본다면 JSX curlies 내부의 객체에 지나지 않다는 것을 알아둬라
인라인 style 속성은 camelCase로 작성된다. 예를 들어 HTML <ul style="background-color: black"> 은 컴포넌트에서 <ul style={{ backgroundColor: 'black' }}> 로 작성된다.
More fun with JavaScript objects and curly braces
여러 표현식을 하나의 객체로 이동하고 JSX에서 중괄호 안에 참조할 수 있다.
const person = {
name: 'Gregorio Y. Zara',
theme: {
backgroundColor: 'black',
color: 'pink'
}
};
export default function TodoList() {
return (
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>
<img
className="avatar"
src="https://i.imgur.com/7vQD0fPs.jpg"
alt="Gregorio Y. Zara"
/>
<ul>
<li>Improve the videophone</li>
<li>Prepare aeronautics lectures</li>
<li>Work on the alcohol-fuelled engine</li>
</ul>
</div>
);
}예제에서 person JavaScript 객체는 name 문자열과 theme 객체가 있다.
const person = {
name: 'Gregorio Y. Zara',
theme: {
backgroundColor: 'black',
color: 'pink'
}
};컴포넌트는 다음과 같이 person 값을 사용할 수 있다.
<div style={person.theme}>
<h1>{person.name}'s Todos</h1>JSX는 JavaScript를 사용하여 데이터와 로직을 구성할 수 있기 때문에 템플릿 언어로서 매우 작다
Recap
JSX에 대해 거의 모든 것을 알게 되었다.
- 따옴표 안의 JSX속성은 문자열로 전달된다.
- 중괄호를 사용하면 JavaScript 로직과 변수를 마크업으로 가져올 수 있다.
- JSX 태그 콘텐츠 내에서나 속성에서
=바로 뒤에 작동한다. {{아}}는 특별한 구문이 아니다. JSX 중괄호 안에 삽입된 JavaScrip 객체이다.
