중괄호 안의 연산
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 7번째.
중괄호에는 변수만 넣을 수 있는 것이 아닙니다. 모든 JavaScript 표현식이 작동합니다. 연산, 문자열 메서드, 함수 호출 등:
const price = 6;
const quantity = 5;
return <p>Total: {price * quantity}</p>;
// 렌더링: Total: 30React는 표현식을 평가하고 결과를 render합니다. 하나의 엘리먼트 안에서 텍스트와 중괄호를 자유롭게 조합할 수 있습니다:
<p>{quantity} items at {price} each</p>중괄호 안에 들어가서는 **안 되는** 한 가지는 바로 문(statement)입니다. if, for 등은 표현식이 아닙니다. 이들을 대체할 JSX 친화적인 요소들은 나중 장에서 알아보겠습니다.
챌린지
초급작은 영수증을 만드세요. 컴포넌트는 price와 quantity를 정의합니다.
id="total"속성을 가진 단락이Total: 30을 렌더링하도록 만드세요. 단, 숫자는 30을 직접 입력하지 말고*를 사용하여 변수로부터 계산하세요.
직접 해보기
<!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>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.