2장. JSX | Notion

1. JSX 개요

JSX(JavaScript XML)는 자바스크립트의 확장 문법으로 HTML과 유사한 문법으로 React에서 동적인 태그를 생성할 수 있음.
JSX는 번들링 과정에서 일반 자바스크립트 코드로 변환됨.

2. JSX 기본 규칙

JSX는 HTML과 유사하지만 몇 가지 고유 규칙이 있음:

규칙	설명
`<tag />`	태그를 열면 반드시 닫아야 함 (셀프 클로징 허용)
`className`	HTML의 class 속성 대신 className 사용
`{}`	표현식 안에 JS 값 출력 가능
`{/* comments */}`	JSX 안에서 주석 작성
`{ condition ? true : false }`	if문 대신 삼항 연산자 사용
`map(()=>())`	반복 렌더링 시 사용하며 `key` 속성을 반드시 지정
`<Fragment>`	여러 요소를 그룹화할 때 사용하며 `<>...</>`로도 표현 가능

3. JSX 이벤트

HTML 이벤트와 유사하며, 카멜 표기법 사용 (예: onClick, onChange 등)
주요 이벤트 속성:
- target: 이벤트가 발생한 요소
- currentTarget: 이벤트 핸들러가 바인딩된 요소
- type: 이벤트 타입 문자열
preventDefault: 기본 이벤트 제거 (false 반환으로는 제거되지 않음)
bubbles: 이벤트 버블링 여부

4. JSX 스타일

React에서 스타일 적용 방법:

종류	설명
인라인 스타일	JS 객체 형태로 스타일 작성. 속성명은 카멜케이스 사용
CSS 파일	일반적인 방법으로 CSS 작성 후 import 해서 사용
SCSS 사용	중첩된 컴포넌트 스타일링에 유리함
Styled-Components	CSS-in-JS 방식. 재사용성과 유지보수에 유리
UI 프레임워크	Bootstrap, MUI, Tailwind CSS 등과 함께 사용 가능

실습 코드 주요 정리

변수 출력: JSX 표현식 {} 사용
조건부 렌더링: 삼항 연산자 및 논리 연산자 사용
반복 출력: map()과 key 속성 사용
Fragment 사용: <Fragment> 또는 <>로 여러 요소 감싸기
이벤트 처리: onClick, onChange, onSubmit 등 사용하며 preventDefault()로 기본 동작 제어