04. JSX(JavaScript XML)
1. JSX란?
JSX(JavaScript XML)는 JavaScript 안에서 HTML과 비슷한 문법으로 화면(UI)을 작성할 수 있도록 만든 문법입니다.
브라우저는 JSX를 직접 이해하지 못하기 때문에 React가 JavaScript 코드로 변환하여 실행합니다.
예를 들어 HTML에서는 다음과 같이 작성합니다.
<h1>동부산CC</h1>
React에서는 JSX로 다음과 같이 작성합니다.
function App() {
return (
<h1>동부산CC</h1>
);
}
2. JSX를 사용하는 이유
HTML만 사용해도 화면을 만들 수 있지만, JavaScript와 함께 사용할 경우 코드가 복잡해집니다.
예를 들어 JavaScript에서는 DOM을 직접 조작해야 합니다.
const title = document.createElement("h1");
title.innerText = "동부산CC";
document.body.appendChild(title);
React에서는 JSX 한 줄이면 됩니다.
<h1>동부산CC</h1>
코드가 훨씬 직관적이며 읽기 쉽습니다.
3. JSX의 기본 규칙
① 하나의 부모 요소만 반환
잘못된 예
return (
<h1>동부산CC</h1>
<p>프리미엄 골프클럽</p>
);
올바른 예
return (
<div>
<h1>동부산CC</h1>
<p>프리미엄 골프클럽</p>
</div>
);
또는 Fragment를 사용할 수 있습니다.
return (
<>
<h1>동부산CC</h1>
<p>프리미엄 골프클럽</p>
</>
);
② 태그는 반드시 닫아야 한다.
HTML에서는
<img>
처럼 사용할 수 있지만,
JSX에서는 반드시 닫아야 합니다.
<img src="golf.jpg" />
마찬가지로
<input />
<br />
<hr />
처럼 작성합니다.
③ class 대신 className 사용
HTML
<div class="hero"></div>
JSX
<div className="hero"></div>
JavaScript에서 class는 예약어이기 때문에 React에서는 className을 사용합니다.
④ for 대신 htmlFor 사용
HTML
<label for="name">
JSX
<label htmlFor="name">
4. JavaScript 사용하기
JSX에서는 중괄호 {} 안에서 JavaScript를 사용할 수 있습니다.
변수 출력
const title = "동부산CC";
return (
<h1>{title}</h1>
);
결과
동부산CC
계산식
const price = 150000;
return (
<p>{price * 2}원</p>
);
결과
300000원
함수 호출
function hello() {
return "환영합니다.";
}
return (
<p>{hello()}</p>
);
5. JSX에서 스타일 적용
CSS 파일 사용
<div className="hero">
.hero {
background: green;
}
Inline Style
React에서는 객체 형태로 작성합니다.
<div
style={{
color: "white",
background: "green",
padding: "20px",
}}
>
동부산CC
</div>
주의할 점은 CSS 속성이 camelCase를 사용한다는 것입니다.
예)
backgroundColor
fontSize
marginTop
6. JSX에서 조건문
삼항 연산자를 많이 사용합니다.
const login = true;
return (
<h1>
{login ? "로그인 완료" : "로그인 필요"}
</h1>
);
&& 연산자
const admin = true;
return (
<>
{admin && <button>관리자 메뉴</button>}
</>
);
7. JSX에서 반복문
React에서는 map()을 사용합니다.
const courses = [
"EAST",
"WEST",
"VALLEY",
];
return (
<>
{courses.map((course) => (
<p key={course}>{course}</p>
))}
</>
);
결과
EAST
WEST
VALLEY
8. JSX에서 이벤트
React는 HTML 이벤트와 비슷하지만 카멜 표기법을 사용합니다.
function click() {
alert("예약 완료");
}
return (
<button onClick={click}>
예약하기
</button>
);
자주 사용하는 이벤트
onClick
onChange
onSubmit
onMouseEnter
onMouseLeave
onKeyDown
9. JSX 예제 (동부산CC Hero)
function Hero() {
const title = "동부산CC";
return (
<section className="hero">
<h1>{title}</h1>
<p>
부산의 자연과 바다가 어우러진
프리미엄 골프클럽
</p>
<button>예약하기</button>
</section>
);
}
10. JSX와 HTML의 차이
HTML JSX
class className
for htmlFor
style 문자열 style 객체
JavaScript 사용 어려움 {} 안에서 자유롭게 사용
여러 태그 가능 하나의 부모 요소 필요
일부 태그 닫지 않아도 됨 모든 태그 닫기
정리
JSX는 HTML처럼 보이지만 JavaScript와 결합된 React 전용 문법입니다.
React에서는 JSX를 사용하여 화면을 만들고, {}를 통해 JavaScript를 자유롭게 사용할 수 있습니다.
또한 className, htmlFor, style 객체 등 HTML과 다른 문법을 이해하는 것이 중요합니다.
JSX는 React의 가장 기본이 되는 문법이며, 이후 배우게 될 컴포넌트(Component), Props, State, 이벤트 처리 등 모든 기능의 기반이 됩니다.
1. JSX란?
JSX(JavaScript XML)는 JavaScript 안에서 HTML과 비슷한 문법으로 화면(UI)을 작성할 수 있도록 만든 문법입니다.
브라우저는 JSX를 직접 이해하지 못하기 때문에 React가 JavaScript 코드로 변환하여 실행합니다.
예를 들어 HTML에서는 다음과 같이 작성합니다.
<h1>동부산CC</h1>
React에서는 JSX로 다음과 같이 작성합니다.
function App() {
return (
<h1>동부산CC</h1>
);
}
2. JSX를 사용하는 이유
HTML만 사용해도 화면을 만들 수 있지만, JavaScript와 함께 사용할 경우 코드가 복잡해집니다.
예를 들어 JavaScript에서는 DOM을 직접 조작해야 합니다.
const title = document.createElement("h1");
title.innerText = "동부산CC";
document.body.appendChild(title);
React에서는 JSX 한 줄이면 됩니다.
<h1>동부산CC</h1>
코드가 훨씬 직관적이며 읽기 쉽습니다.
3. JSX의 기본 규칙
① 하나의 부모 요소만 반환
잘못된 예
return (
<h1>동부산CC</h1>
<p>프리미엄 골프클럽</p>
);
올바른 예
return (
<div>
<h1>동부산CC</h1>
<p>프리미엄 골프클럽</p>
</div>
);
또는 Fragment를 사용할 수 있습니다.
return (
<>
<h1>동부산CC</h1>
<p>프리미엄 골프클럽</p>
</>
);
② 태그는 반드시 닫아야 한다.
HTML에서는
<img>
처럼 사용할 수 있지만,
JSX에서는 반드시 닫아야 합니다.
<img src="golf.jpg" />
마찬가지로
<input />
<br />
<hr />
처럼 작성합니다.
③ class 대신 className 사용
HTML
<div class="hero"></div>
JSX
<div className="hero"></div>
JavaScript에서 class는 예약어이기 때문에 React에서는 className을 사용합니다.
④ for 대신 htmlFor 사용
HTML
<label for="name">
JSX
<label htmlFor="name">
4. JavaScript 사용하기
JSX에서는 중괄호 {} 안에서 JavaScript를 사용할 수 있습니다.
변수 출력
const title = "동부산CC";
return (
<h1>{title}</h1>
);
결과
동부산CC
계산식
const price = 150000;
return (
<p>{price * 2}원</p>
);
결과
300000원
함수 호출
function hello() {
return "환영합니다.";
}
return (
<p>{hello()}</p>
);
5. JSX에서 스타일 적용
CSS 파일 사용
<div className="hero">
.hero {
background: green;
}
Inline Style
React에서는 객체 형태로 작성합니다.
<div
style={{
color: "white",
background: "green",
padding: "20px",
}}
>
동부산CC
</div>
주의할 점은 CSS 속성이 camelCase를 사용한다는 것입니다.
예)
backgroundColor
fontSize
marginTop
6. JSX에서 조건문
삼항 연산자를 많이 사용합니다.
const login = true;
return (
<h1>
{login ? "로그인 완료" : "로그인 필요"}
</h1>
);
&& 연산자
const admin = true;
return (
<>
{admin && <button>관리자 메뉴</button>}
</>
);
7. JSX에서 반복문
React에서는 map()을 사용합니다.
const courses = [
"EAST",
"WEST",
"VALLEY",
];
return (
<>
{courses.map((course) => (
<p key={course}>{course}</p>
))}
</>
);
결과
EAST
WEST
VALLEY
8. JSX에서 이벤트
React는 HTML 이벤트와 비슷하지만 카멜 표기법을 사용합니다.
function click() {
alert("예약 완료");
}
return (
<button onClick={click}>
예약하기
</button>
);
자주 사용하는 이벤트
onClick
onChange
onSubmit
onMouseEnter
onMouseLeave
onKeyDown
9. JSX 예제 (동부산CC Hero)
function Hero() {
const title = "동부산CC";
return (
<section className="hero">
<h1>{title}</h1>
<p>
부산의 자연과 바다가 어우러진
프리미엄 골프클럽
</p>
<button>예약하기</button>
</section>
);
}
10. JSX와 HTML의 차이
HTML JSX
class className
for htmlFor
style 문자열 style 객체
JavaScript 사용 어려움 {} 안에서 자유롭게 사용
여러 태그 가능 하나의 부모 요소 필요
일부 태그 닫지 않아도 됨 모든 태그 닫기
정리
JSX는 HTML처럼 보이지만 JavaScript와 결합된 React 전용 문법입니다.
React에서는 JSX를 사용하여 화면을 만들고, {}를 통해 JavaScript를 자유롭게 사용할 수 있습니다.
또한 className, htmlFor, style 객체 등 HTML과 다른 문법을 이해하는 것이 중요합니다.
JSX는 React의 가장 기본이 되는 문법이며, 이후 배우게 될 컴포넌트(Component), Props, State, 이벤트 처리 등 모든 기능의 기반이 됩니다.
#04. JSX(JavaScript XML)