JSX는 HTML이랑 뭐가 다를까?도대체 JSX가 뭔데!!

React로 코딩을 막 시작하면,
HTML처럼 생긴 코드인데 자꾸 오류가 나고…
class를 썼더니 빨간 줄 뜨고…
for도 못 쓰고…

"이게 대체 뭐야… 나 분명 HTML 썼는데 왜 안 되는 거야??"

이렇게 혼란스러웠던 적 있으시죠?

그 이유는 바로
👉 우리가 쓰는 건 HTML이 아니라 JSX이기 때문이에요!

오늘은 JSX가 뭔지, 그리고 HTML과 뭐가 어떻게 다른지
진짜 쉽게 알려드릴게요.

---

1️⃣ JSX는 뭐예요?

JSX는 한마디로 JavaScript 안에서 HTML처럼 생긴 문법을 쓸 수 있게 해주는 문법이에요.

jsx

복사편집

const element = <h1>Hello, React!</h1>;

이 코드 보시면,
JavaScript 변수 안에 <h1> 같은 태그가 들어가 있죠?

원래 JS에서는 태그를 이렇게 직접 쓰는 게 불가능했는데,
JSX 덕분에 저런 식으로 쓸 수 있게 된 거예요!

📌 JSX = "JavaScript + XML(HTML 비슷한 문법)"
→ JavaScript 안에서 HTML 구조를 쉽게 표현할 수 있게 해주는 도구

---

2️⃣ 그럼 HTML이랑 뭐가 달라요?

JSX는 HTML이랑 진짜 닮았지만,
딱! 몇 가지 다른 점이 있어요.
이걸 몰라서 초보자들이 헷갈리는 경우가 정말 많아요.

---

✅ 차이점 1. class → className으로 써야 해요

html

복사편집

<!-- HTML --> <div class="box"></div>

jsx

복사편집

// JSX <div className="box"></div>

왜?
class는 JavaScript에서 예약어이기 때문에 JSX에선 className을 씁니다.

---

✅ 차이점 2. 태그는 꼭 닫아줘야 해요 (셀프 클로징 포함)

jsx

복사편집

// JSX에서 이런 건 에러! <input> ✅ 이렇게 써야 돼요 <input />

HTML에서는 <br>, <img> 이런 거 그냥 닫지 않아도 괜찮지만,
JSX는 무조건 닫아줘야 해요!

---

✅ 차이점 3. 하나의 부모 태그로 감싸야 해요

JSX에서는 두 개 이상의 태그가 나란히 있으면 에러가 나요.

jsx

복사편집

// 에러 발생 <h1>안녕하세요</h1> <p>반가워요</p> // 해결 방법 <div> <h1>안녕하세요</h1> <p>반가워요</p> </div>

또는 <></> 같은 Fragment 문법으로 감싸도 돼요!

---

✅ 차이점 4. camelCase 문법 사용 (예: onClick)

jsx

복사편집

<button onclick="doSomething()">클릭</button> // ❌ HTML 스타일 <button onClick={doSomething}>클릭</button> // ✅ JSX 스타일

JSX에서는 이벤트나 속성명을 전부 camelCase로 써야 해요!
onclick → onClick,
tabindex → tabIndex 이런 식으로요.

---

✏️ 정리표 (JSX vs HTML)

항목HTMLJSX

클래스 지정	class	className
태그 닫기	생략 가능	반드시 닫아야 함 (<img />)
여러 요소	OK	부모 태그로 감싸야 함
이벤트 이름	onclick	onClick
속성 스타일	소문자	camelCase (tabIndex, maxLength)

 

---

🤔 그래서 왜 굳이 JSX를 써야 할까요?

• JavaScript 안에서 HTML처럼 구조를 짤 수 있어서 훨씬 편해요
• 조건문, 반복문 등 JS 기능을 그대로 써서 유연하게 화면을 구성할 수 있어요
• 초보자에겐 낯설지만, 익숙해지면 개발 속도가 훨씬 빨라집니다!

---

✔️ 한 줄 정리

JSX는 HTML처럼 생겼지만, JavaScript에 맞게 살짝 다른 문법을 가진 도구예요.
딱 4~5가지 차이만 익히면 금방 익숙해져요!