JSX
개념 설명
JavaScript에 HTML 유사 구문을 작성할 수 있게 해주는 JavaScript 확장 문법.
핵심 포인트
- JSX는 React.createElement() 호출로 변환됨 (Babel 컴파일러 사용)
- JavaScript 표현식은 중괄호 안에 작성
- 클래스명은 className, 이벤트는 camelCase 사용 (onClick, onChange)
- 단일 루트 요소 또는 React.Fragment로 감싸야 함
- 자체 닫는 태그는 반드시 슬래시 포함 (
,
)
예시 코드
// JSX 기본 문법
function Welcome({ name, age }) {
const isAdult = age >= 18;
return (
<div className="welcome-container">
<h1>안녕하세요, {name}님!</h1>
<p>나이: {age}세</p>
{isAdult ? (
<span className="adult">성인입니다</span>
) : (
<span className="minor">미성년자입니다</span>
)}
<button onClick={() => alert('클릭!')}>
클릭하세요
</button>
</div>
);
}더 많은 내용을 확인하세요! 📚
“JSX”의 전체 내용을 보시려면 프리미엄 플랜이 필요합니다.
✨ 모든 기술 문서 무제한 액세스
📝 실습 예제와 상세한 코드 설명
🎯 면접 예상 질문과 답변 가이드