JSX란

✅ JSX란?

JSX (JavaScript XML) 는 JavaScript 안에서 HTML처럼 보이는 문법입니다.
주로 React에서 UI를 구성할 때 사용됩니다.

📌 정의: JSX는 JavaScript에 XML/HTML 문법을 결합한 확장 문법(Syntax Extension)

---

🧩 왜 JSX를 사용하는가?

React는 UI를 컴포넌트 단위로 구성하는데, JSX는 컴포넌트의 구조를 보기 쉽게 표현해줍니다.

예를 들어:

jsx

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

위 코드는 보기엔 HTML 같지만 실제로는 JavaScript 코드입니다.
Babel 같은 도구가 이 코드를 다음과 같이 변환합니다:

js

const element = React.createElement('h1', null, 'Hello, world!');

 

---

💡 JSX 특징 요약

특징	설명
HTML과 유사한 문법	<div>, <h1> 등 HTML 태그처럼 보임
JavaScript 코드와 혼합 가능	{} 중괄호 안에 JS 표현식 사용
컴파일 필요	브라우저가 JSX를 직접 이해하지 못하므로 Babel 등으로 변환 필요
컴포넌트 구성에 최적	React에서 UI를 계층적으로 만들기 쉬움

 

---

🧪 JSX 예시

jsx

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

• name은 props로 전달된 값이고
• {} 안에서 JavaScript 표현식을 사용할 수 있습니다.

---

⚠️ JSX 문법 주의사항

주의사항	설명
태그는 반드시 닫아야 함	<img />, <br />처럼 셀프 클로징 필요
하나의 부모 요소로 감싸야 함	여러 요소를 리턴하려면 <div> 또는 <></> 사용
class → className	HTML의 class는 JSX에선 className으로
style은 객체로	<div style={{ color: 'red' }}> 형태로 작성

 

---

📌 JSX 요약

항목	설명
목적	JavaScript에서 UI 구조를 HTML처럼 쉽게 표현
주 사용처	React 컴포넌트
특징	HTML-like 문법, JavaScript 표현식 가능
변환	Babel 등으로 React.createElement 코드로 컴파일됨