중괄호 사용하기
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 6번째.
JSX는 JavaScript와 섞이는 순간 매우 흥미로워집니다. 중괄호 { }는 마크업에서 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>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.