JSX를 사용하면 JavaScript 파일에 HTML과 비슷한 마크업을 작성하여 렌더링 로직과 콘텐츠를 같은 곳에 놓을 수 있습니다. 때로는 JavaScript 로직을 추가하거나 해당 마크업 내부의 동적인 프로퍼티를 참조하고 싶을 수 있습니다. 이 상황에서는 JSX에서 중괄호를 사용하여 JavaScript를 사용할 수 있습니다.
학습 내용
- 따옴표로 문자열을 전달하는 방법
- 중괄호가 있는 JSX 안에서 JavaScript 변수를 참조하는 방법
- 중괄호가 있는 JSX 안에서 JavaScript 함수를 호출하는 방법
- 중괄호가 있는 JSX 안에서 JavaScript 객체를 사용하는 방법
따옴표로 문자열 전달하기
문자열 어트리뷰트를 JSX에 전달하려면 작은따옴표나 큰따옴표로 묶어야 합니다.
Error
Extra 185 of 186 byte(s) found at buffer[1]
여기에서는 "https://i.imgur.com/7vQD0fPs.jpg"
와 "Gregorio Y. Zara"
가 문자열로 전달되고 있습니다.
그러나 src
또는 alt
를 동적으로 지정하려면 어떻게 해야 할까요? "
와"
를 {
와}
로 바꿔 JavaScript의 값을 사용할 수 있습니다.
Error
Extra 185 of 186 byte(s) found at buffer[1]
이미지를 둥글게 만드는 "avatar"
CSS 클래스 이름을 지정하는 className="avatar"
와 avatar
라는 JavaScript 변수의 값을 읽는 src={avatar}
의 차이점에 주목해야 합니다. 중괄호를 사용하면 마크업에서 바로 JavaScript를 사용할 수 있기 때문입니다.
중괄호 사용하기: JavaScript 세계로 연결하는 창
JSX는 JavaScript를 작성하는 특별한 방법입니다. 중괄호 { }
사이에서 JavaScript를 사용할 수 있습니다. 아래 예시는 name
을 선언한 다음 <h1>
내부에 중괄호로 포함합니다.
export default function TodoList() { const name = 'Gregorio Y. Zara'; return ( <h1>{name}'s To Do List</h1> ); }
Error
Extra 185 of 186 byte(s) found at buffer[1]
name
값을 'Gregorio Y. Zara'
에서 'Hedy Lamarr'
로 변경해 To Do List 제목이 어떻게 변경되는지 확인해봅시다.
formatDate()
와 같은 함수 호출을 포함해 모든 JavaScript 표현식은 중괄호 사이에서 작동합니다.
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> ); }
중괄호를 사용하는 곳
JSX 안에서 중괄호는 두 가지 방법으로만 사용할 수 있습니다.
- JSX 태그 안의 문자:
<h1>{name}'s To Do List</h1>
는 작동하지만,<{tag}>Gregorio Y. Zara's To Do List</{tag}>
는 작동하지 않습니다. =
바로 뒤에 오는 어트리뷰트:src={avatar}
는avatar
변수를 읽지만src="{avatar}"
는"{avatar}"
문자열을 전달합니다.
”이중 중괄호” 사용하기: JSX의 CSS와 다른 객체
JSX에는 문자열, 숫자 및 기타 JavaScript 표현식뿐만 아니라 객체를 전달할 수도 있습니다. 또한 객체는 { name: "Hedy Lamarr", inventions: 5 }
처럼 중괄호로 표시됩니다. 따라서 JSX에서 객체를 전달하려면 person={{ name: "Hedy Lamarr", inventions: 5 }}
와 같이 다른 중괄호 쌍으로 객체를 감싸야 합니다.
JSX의 인라인 CSS 스타일에서도 볼 수 있습니다. React에서 인라인 스타일을 사용할 필요가 없습니다(CSS class는 대부분 잘 작동합니다). 그러나 인라인 스타일이 필요할 때 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 중괄호 안의 객체에 불과하다는 것을 알아야 합니다.
JavaScript 객체와 중괄호에 대해서 더 알아보기
여러 표현식을 하나의 객체로 옮기고 중괄호 안의 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
객체는 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를 사용하여 데이터와 논리를 구성할 수 있는 매우 작은 템플릿 언어입니다.
요약
이제 JSX에 대한 거의 모든 것을 알게 되었습니다.
- 따옴표 안의 JSX 어트리뷰트는 문자열로 전달됩니다.
- 중괄호를 사용하면 JavaScript 논리와 변수를 마크업으로 가져올 수 있습니다.
- JSX 태그 내부 또는 어트리뷰트의
=
뒤에서 작동합니다. {{
및}}
는 특별한 문법이 아닙니다. JSX 중괄호 안에 들어 있는 JavaScript 객체입니다.
챌린지 1 of 3: 실수 고치기
아래 코드는 Objects are not valid as a React child
라는 오류가 발생합니다.
const person = { name: 'Gregorio Y. Zara', theme: { backgroundColor: 'black', color: 'pink' } }; export default function TodoList() { return ( <div style={person.theme}> <h1>{person}'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> ); }
문제를 찾았나요?