React JSX 문법

📘 JSX 문법 완벽 가이드

JSX(JavaScript XML)는 React에서 UI를 작성하기 위해 사용하는 문법입니다. 자바스크립트 안에서 HTML처럼 보이는 문법을 사용할 수 있게 해 주며, React.createElement() 함수를 간편하게 표현할 수 있습니다.

1. JSX 기본 구조

const element = <h1>Hello, React!</h1>;
  

위 코드는 내부적으로 다음과 같이 변환됩니다:

const element = React.createElement('h1', null, 'Hello, React!');
  

2. 하나의 부모 요소로 감싸야함

JSX에서는 반드시 모든 태그가 하나의 부모 요소로 감싸져야 합니다. 여러 요소를 나열하고 싶을 경우, <div>나 <></> (Fragment)을 사용합니다.

// 올바른 예시
return (
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
);
  

3. 자바스크립트 표현식 사용

JSX 내부에서는 { }를 사용하여 변수, 연산, 함수 호출 등을 삽입할 수 있습니다.

const name = "React";
const element = <h1>Hello, {name}!</h1>;
  

4. 속성 지정 (Props)

JSX에서는 HTML 속성과 거의 유사하게 속성을 지정하지만, class 대신 className, for 대신 htmlFor 등을 사용합니다.

<div className="box">Hello</div>
<label htmlFor="input">이름</label>
  

5. 조건부 렌더링

삼항 연산자나 AND(&&), 함수 등을 이용하여 조건에 따라 컴포넌트를 다르게 렌더링 할 수 있습니다.

{isLoggedIn ? <LogoutButton /> : <LoginButton />}
{count > 0 && <p>You have {count} messages.</p>}
  

6. 주석 작성

JSX 내부에서는 주석을 {/* ... */} 형식으로 작성해야 합니다.

return (
  <div>
    {/* 여기는 주석입니다 */}
    <h1>Hello</h1>
  </div>
);
  

✅ 요약

• JSX는 JavaScript 안에서 HTML처럼 UI를 표현
• 하나의 부모 태그로 감싸야 함
• { } 안에 자바스크립트 표현식 사용 가능
• HTML과 유사하지만 속성명이 다를 수 있음 (class → className)
• 조건부 렌더링, 반복 렌더링, 주석 처리 등 가능