JSX는 HTML이 아닙니다
Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 4번째.
JSX는 HTML처럼 보이지만 JavaScript 내부에 존재하며, 그로 인해 자주 접하게 될 몇 가지 작은 차이점이 발생합니다:
1. class 대신 className 사용. class는 JavaScript의 예약어이므로 JSX에서는 이 속성의 이름을 변경합니다:
<p className="warning">Careful!</p>2. 모든 태그는 닫혀야 합니다. HTML은 <br>와 <input>을 허용하지만, JSX는 그렇지 않습니다. 자체 닫힘 태그는 />로 끝납니다:
<input id="name" />
<br />3. camelCase 속성. 여러 단어로 된 속성은 camelCase가 됩니다: onclick → onClick, tabindex → tabIndex. 이벤트를 다룰 때 onClick을 자주 사용하게 될 것입니다.
챌린지
초급아래 문단에 JSX 방식으로 CSS 클래스를 추가해야 합니다.
- 문단에 CSS 클래스
notice를 지정하세요 (기억하세요: JSX는class속성 이름을 사용하지 않습니다). - id와 텍스트는 변경하지 않고 유지하세요.
직접 해보기
<!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>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.