중괄호 사용하기
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨. 42개 중 6번째.
JavaScript를 함께 사용하면 JSX가 흥미로워집니다. 중괄호 { }를 사용하면 마크업에서 JavaScript로 돌아가는 창이 열립니다:
const name = 'Ada';
return <p>Hello, {name}!</p>;중괄호 안의 모든 내용은 JavaScript로 평가되고, 그 결과가 페이지에 표시됩니다. 여기서는 단락에 Hello, Ada!이 렌더링됩니다.
중괄호가 없으면 JSX는 입력한 내용을 일반 텍스트로 처리합니다. <p>Hello, name!</p>는 name이라는 단어를 그대로 표시하므로, 아마 의도한 결과가 아닐 것입니다.
이것은 가장 자주 사용되는 JSX 요소입니다. 데이터를 변수로 정의한 다음 { }를 사용해 마크업에 넣으세요.
챌린지
초급컴포넌트는 const name = 'Ada'를 정의하지만, 인사말에는 name이라는 단어가 그대로 표시됩니다.
- 문단을 수정하여 변수를 사용하세요.
Hello, Ada!가 렌더링되어야 합니다. - 변수 자체는 변경하지 마세요.
직접 해보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.