속성에서의 중괄호 사용
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 8번째.
중괄호는 특성(attributes)에서도 동작합니다. 따옴표를 중괄호로 바꾸면 특성 값이 JavaScript로부터 옵니다:
const level = 'warning';
return <p className={level}>Check this!</p>;이제 단락의 클래스는 변수가 가진 값이 됩니다. level을 'error'로 변경하면 클래스도 이를 따릅니다. 이것이 React 앱이 데이터를 기반으로 스타일을 전환하는 방식입니다.
문법을 주의 깊게 살펴보세요: className={level}과 같이 중괄호 둘레에 따옴표가 없습니다. className="{level}"(따옴표 포함)은 클래스를 문자 그대로의 텍스트인 {level}로 설정합니다.
챌린지
쉬움alert 단락은 level 변수에서 CSS 클래스를 가져와야 합니다.
- 중괄호를 사용하여 단락의
className을level의 값으로 설정하세요 (클래스는 결과적으로warning이 되어야 합니다). - 속성에 warning 단어를 직접 입력하지 마세요. 변수를 사용하세요.
직접 해보기
<!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>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.