[React] JSX

개요

JSX(JavaScript XML)는 JavaScript 코드 안에서 HTML과 유사한 문법을 사용할 수 있게 해주는 React의 문법 확장입니다. JSX는 브라우저가 직접 이해하지 못하므로 Babel/Vite가 일반 JavaScript로 변환합니다.

JSX 기본 문법

태그는 반드시 닫아야 함

// ❌ HTML에서는 닫지 않아도 되지만, JSX에서는 필수
<input type="text">
<br>
<img src="..." >

// ✅ 자체 닫힘 태그 사용
<input type="text" />
<br />
<img src="..." />

최상위 요소는 하나

// ❌ 오류
return (
  <h1>제목</h1>
  <p>내용</p>
);

// ✅ Fragment 사용 (불필요한 div 없이)
return (
  <>
    <h1>제목</h1>
    <p>내용</p>
  </>
);

JavaScript 표현식 삽입 {}

중괄호 {} 안에 모든 JavaScript 표현식을 사용할 수 있습니다.

const name = "Alice";
const age = 25;
const items = ["사과", "바나나", "딸기"];

return (
  <div>
    {/* 변수 */}
    <p>{name}</p>

    {/* 연산 */}
    <p>{age * 2}</p>

    {/* 함수 호출 */}
    <p>{items.join(", ")}</p>

    {/* 삼항 연산자 */}
    <p>{age >= 19 ? "성인" : "미성년자"}</p>

    {/* 메서드 체인 */}
    <p>{name.toUpperCase()}</p>
  </div>
);

{} 안에는 문(statement)이 아닌 식(expression)만 가능. if, for는 직접 사용 불가.

속성 (Attributes)

카멜케이스 사용

// HTML 속성        → JSX 속성
// class            → className
// for              → htmlFor
// tabindex         → tabIndex
// onclick          → onClick
// onchange         → onChange
// style="color:red" → style=

<div className="container">
  <label htmlFor="email">이메일</label>
  <input id="email" tabIndex={1} />
</div>

문자열 vs 표현식

const url = "https://example.com";

// 문자열: 따옴표 사용
<a href="https://react.dev">React</a>

// 동적 값: 중괄호 사용
<a href={url}>링크</a>
<img width={100} height={100} />    // 숫자도 중괄호
<button disabled={true} />          // boolean도 중괄호
<button disabled />                 // true인 경우 값 생략 가능

인라인 스타일

// 객체로 전달, 속성명은 카멜케이스
const style = {
  color: 'red',
  fontSize: '16px',      // font-size → fontSize
  backgroundColor: 'blue', // background-color → backgroundColor
};

<div style={style}>스타일 적용</div>

// 또는 직접 작성 (중괄호 2개: 하나는 표현식, 하나는 객체)
<div style=>스타일 적용</div>

조건부 렌더링

const isLoggedIn = true;
const score = 85;

return (
  <div>
    {/* 삼항 연산자 */}
    {isLoggedIn ? <p>환영합니다!</p> : <p>로그인하세요</p>}

    {/* && 연산자 (false일 때 아무것도 렌더링 안 함) */}
    {isLoggedIn && <button>로그아웃</button>}

    {/* null 반환 = 아무것도 렌더링 안 함 */}
    {score < 60 ? <p>불합격</p> : null}
  </div>
);

0 && <Component />는 0이 렌더링되는 주의사항이 있음.
Boolean(count) && <Component /> 또는 count > 0 && <Component />로 안전하게 사용.

리스트 렌더링

const fruits = ["사과", "바나나", "딸기"];

return (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>   // key 속성 필수!
    ))}
  </ul>
);

key는 React가 각 요소를 구분하기 위한 고유 식별자. 배열 인덱스보다 고유 ID 사용 권장.

주석

return (
  <div>
    {/* JSX 안에서는 이렇게 주석 작성 */}
    <p>내용</p>
    {
      // 단독 줄도 가능
    }
  </div>
);

JSX 변환 이해

JSX는 내부적으로 React.createElement() 호출로 변환됩니다.

// JSX 작성
const element = <h1 className="title">Hello</h1>;

// Babel이 변환하는 코드 (직접 작성할 필요 없음)
const element = React.createElement('h1', { className: 'title' }, 'Hello');

관련 링크

• React 공식 문서 - JSX로 마크업 작성
• React 공식 문서 - 중괄호로 JavaScript 사용