1. JSX의 개념 🔍
- 정의: JavaScript XML의 약자로, JavaScript 내에서 HTML과 유사한 마크업을 작성할 수 있게 해주는 문법적 확장
- 탄생 배경: Facebook에서 React를 개발하며 UI 컴포넌트를 더 직관적으로 표현하기 위해 도입
- 목적: 마크업과 로직을 분리하는 대신, 둘 다 포함하는 '컴포넌트'라는 단위로 관심사를 분리
2. JSX 기본 문법과 특징 📝
- 기본 형태: HTML과 유사하지만 JavaScript 내부에서 사용
- 확장자: .jsx 또는 .js 파일에서 사용 가능
- 트랜스파일링: Babel과 같은 도구를 통해 일반 JavaScript로 변환됨
- React.createElement() 변환: JSX는 최종적으로 React.createElement() 함수 호출로 변환
// JSX 코드
const element = <h1 className="greeting">안녕하세요!</h1>;
// 변환된 코드
const element = React.createElement(
'h1',
{className: 'greeting'},
'안녕하세요!'
);
3. JSX 문법 규칙 📋
- 단일 루트 요소: 모든 JSX는 하나의 부모 요소로 감싸야 함
// 올바른 사용
return (
<div>
<h1>제목</h1>
<p>내용</p>
</div>
);
// React Fragment 사용
return (
<>
<h1>제목</h1>
<p>내용</p>
</>
);
- 모든 태그 닫기: 빈 태그도 반드시 닫아야 함 (<img />, <input />)
- JavaScript 표현식: 중괄호 {} 안에 JavaScript 표현식 사용 가능
const name = "민영";
return <h1>안녕하세요, {name}님!</h1>;
- 조건부 렌더링: 삼항 연산자나 논리 연산자를 활용
return <div>{isLoggedIn ? <UserGreeting /> : <GuestGreeting />}</div>;
4. JSX에서의 속성 사용 🏷️
- HTML 속성 vs JSX 속성: camelCase 명명 규칙 사용
- class → className
- for → htmlFor
- tabindex → tabIndex
- onclick → onClick
- 스타일 적용: 객체 형태로 전달
const divStyle = {
color: 'blue',
fontSize: '20px'
};
return <div style={divStyle}>스타일 적용</div>;
5. JSX에서 리스트 렌더링 📑
- map() 함수 활용: 배열 데이터를 JSX 요소로 변환
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>{number}</li>
);
return <ul>{listItems}</ul>;
- key 속성: 리스트 아이템의 안정적인 식별을 위해 고유한 key 값 필요
6. JSX에서 이벤트 처리 🖱️
- 이벤트 핸들러: camelCase로 이름 지정
function handleClick() {
console.log('버튼이 클릭되었습니다!');
}
return <button onClick={handleClick}>클릭하세요</button>;
7. JSX의 장점과 활용 💡
- 가독성: UI 구조를 직관적으로 파악 가능
- 보안: 기본적으로 XSS(Cross-Site Scripting) 공격 방지
- 컴포넌트 기반: 재사용 가능한 UI 컴포넌트 생성 용이
- 개발 효율성: 마크업과 로직을 한 파일에서 관리하여 개발 효율성 향상
8. JSX 사용 시 주의사항 ⚠️
- 대소문자 구분: 컴포넌트는 대문자로 시작, HTML 요소는 소문자로 시작
- boolean 속성: true는 생략 가능 (<Button disabled />)
- 조건부 렌더링: 복잡한 조건은 JSX 외부에서 처리하는 것이 좋음
- 주석 작성: {/* 주석 내용 */} 형식으로 작성