2단계: JSX 마스터하기

2-1. JSX란 무엇인가?

JSX는 JavaScript에서 XML/HTML처럼 작성할 수 있게 해주는 React 확장 문법입니다. React.createElement 호출로 변환되어 실행됩니다.

2-2. JSX 문법 규칙

• 하나의 부모 요소로 감싸야 함
• 모든 태그는 닫혀야 함
• 속성은 camelCase
• class → className

2-3. 표현식 사용법

JSX 안에서는 {}로 감싸서 JavaScript 표현식을 사용할 수 있습니다.

<h1>{user.name}</h1>

2-4. 조건부 렌더링

{isLoggedIn ? <Logout /> : <Login />}
{messages.length > 0 && <Notification />}

2-5. 반복문 처리

배열 데이터를 JSX로 출력할 땐 map()을 사용합니다.

{items.map(item => <li key={item.id}>{item.name}</li>)}

2-6. 스타일 적용 방법

• 인라인 스타일: 객체 형태
• className: 문자열
• styled-components: CSS-in-JS 방식

2-7. JSX와 HTML의 차이점 정리

• htmlFor, className 등 속성명 차이
• JavaScript 표현식 허용
• 이벤트 핸들러 전달 방식 차이

요약

• JSX는 React 전용 문법으로 HTML-like 문법을 자바스크립트에 통합한 형태
• 모든 태그는 닫혀야 하며 표현식은 {} 내부에 작성
• 조건문은 삼항 연산자 또는 &&, 반복은 map()을 활용
• 스타일링은 className 또는 인라인 스타일 객체를 통해 처리

심화학습

Q1. JSX 내부에서 일반 if문이 작동하지 않는 이유는?
A1. JSX는 표현식만 허용하므로, 문장(statement)인 if문은 사용할 수 없습니다. 삼항 연산자나 조건부 렌더링 기법을 사용해야 합니다.

Q2. 반복문에서 key 속성을 생략하면 어떤 문제가 생기는가?
A2. key가 없으면 React는 어떤 항목이 변경됐는지 판단할 수 없어 리렌더링 최적화가 깨지고, 의도치 않은 버그가 발생할 수 있습니다.

Q3. JSX와 HTML의 가장 혼란스러운 차이점은?
A3. class가 아닌 className을 써야 하고, label에서는 for 대신 htmlFor를 써야 하는 점입니다. 이는 자바스크립트 예약어와 충돌을 피하기 위함입니다.