[React] JSX 기초 완벽 가이드: React의 화면을 그리는 문법

React를 처음 배울 때 가장 먼저 마주치는 낯선 문법이 바로 JSX입니다. 자바스크립트 안에 HTML 같은 코드가 섞여 있는 모습을 보고 당황하기 쉽죠. 이 글에서는 JSX가 무엇인지, 어떤 규칙을 지켜야 하는지 기초부터 차근차근 알아보겠습니다.

JSX란?

JSX는 JavaScript XML의 줄임말로, 자바스크립트 안에서 HTML과 비슷한 문법으로 UI를 표현할 수 있게 해주는 문법 확장입니다.

// 이것이 바로 JSX
const element = <h1>안녕하세요, React!</h1>;

한 줄로 정리하면, JSX는 "자바스크립트 코드 안에 마크업을 자연스럽게 작성하는 방법"입니다. 브라우저는 JSX를 직접 이해하지 못하기 때문에, Babel 같은 도구가 JSX를 일반 자바스크립트로 변환해줍니다.

// 우리가 작성하는 JSX
const element = <h1>안녕하세요</h1>;

// Babel이 변환한 실제 자바스크립트
// React.createElement(태그, 속성, 자식) 형태로 바뀜
const element = React.createElement('h1', null, '안녕하세요');

즉, JSX는 필수는 아니지만 React.createElement를 매번 쓰는 번거로움을 없애주는 편리한 문법입니다.

JSX 안에서 자바스크립트 사용하기

JSX의 진짜 강력함은 자바스크립트 표현식을 자유롭게 넣을 수 있다는 점입니다. 중괄호 {} 안에 자바스크립트 표현식을 넣으면 됩니다.

function Greeting() {
  const name = "홍길동";

  return (
    // 중괄호 안에 변수, 연산, 함수 호출 등 표현식을 넣을 수 있음
    <div>
      <h1>{name}님 환영합니다</h1>        {/* 변수 */}
      <p>{2 + 3}개의 알림이 있습니다</p>    {/* 연산 결과: 5 */}
      <p>{name.toUpperCase()}</p>          {/* 함수 호출 */}
    </div>
  );
}

단, 중괄호 안에는 표현식(expression)만 들어갈 수 있습니다. if문이나 for문 같은 문(statement)은 사용할 수 없습니다.

// ❌ if문은 표현식이 아니라서 중괄호 안에 못 넣음
<p>{if (isLogin) { ... }}</p>

// ✅ 삼항 연산자는 표현식이라서 사용 가능
<p>{isLogin ? "로그아웃" : "로그인"}</p>

JSX의 핵심 규칙

JSX에는 반드시 지켜야 하는 몇 가지 규칙이 있습니다. 하나씩 살펴보겠습니다.

1. 하나의 부모 요소로 감싸야 한다

JSX는 반드시 하나의 최상위 요소를 반환해야 합니다.

// ❌ 두 개의 요소가 나란히 있으면 에러
function App() {
  return (
    <h1>제목</h1>
    <p>내용</p>
  );
}

// ✅ 하나의 div로 감싸기
function App() {
  return (
    <div>
      <h1>제목</h1>
      <p>내용</p>
    </div>
  );
}

불필요한 div를 추가하고 싶지 않다면 Fragment를 사용할 수 있습니다.

// Fragment는 실제 DOM에 아무 요소도 추가하지 않으면서 감싸주는 역할
// <></> 는 <React.Fragment></React.Fragment>의 축약형
function App() {
  return (
    <>
      <h1>제목</h1>
      <p>내용</p>
    </>
  );
}

2. 모든 태그는 닫아야 한다

HTML에서는 <br>, <img>처럼 닫지 않아도 되는 태그가 있지만, JSX에서는 모든 태그를 반드시 닫아야 합니다.

// ❌ HTML에서는 되지만 JSX에서는 에러
<img src="photo.jpg">
<br>
<input type="text">

// ✅ 셀프 클로징(/)으로 닫아줘야 함
<img src="photo.jpg" />
<br />
<input type="text" />

3. camelCase로 속성을 작성한다

JSX 속성은 대부분 camelCase(카멜 케이스)로 작성합니다. HTML 속성명과 다른 경우가 있으니 주의해야 합니다.

// ❌ HTML 방식의 속성명
<div class="box" onclick={handleClick}></div>

// ✅ JSX 방식 (camelCase)
<div className="box" onClick={handleClick}></div>

특히 자주 실수하는 두 가지를 기억해두세요.

• class → className (class는 자바스크립트 예약어라서)
• for → htmlFor (label의 for 속성, for도 예약어)

<label htmlFor="email">이메일</label>
<input id="email" className="input-field" />

조건부 렌더링

JSX에서는 조건에 따라 다른 화면을 보여주는 패턴이 자주 쓰입니다.

function UserStatus({ isLogin }) {
  return (
    <div>
      {/* 삼항 연산자: 조건에 따라 둘 중 하나를 렌더링 */}
      {isLogin ? <p>환영합니다!</p> : <p>로그인이 필요합니다</p>}

      {/* && 연산자: 조건이 true일 때만 렌더링 */}
      {/* isLogin이 true면 뒤의 JSX가, false면 아무것도 안 나옴 */}
      {isLogin && <button>로그아웃</button>}
    </div>
  );
}

&& 연산자를 쓸 때 주의할 점은, 앞의 값이 0이면 화면에 0이 그대로 출력된다는 것입니다.

// ❌ count가 0이면 화면에 숫자 0이 그대로 표시됨
{count && <p>메시지가 있습니다</p>}

// ✅ 명확하게 boolean으로 변환하거나 삼항 연산자 사용
{count > 0 && <p>메시지가 있습니다</p>}

리스트 렌더링

배열을 화면에 나열할 때는 map() 메서드를 사용합니다.

function FruitList() {
  const fruits = ["사과", "바나나", "포도"];

  return (
    <ul>
      {/* map으로 배열을 JSX 요소 배열로 변환 */}
      {/* 각 요소에는 반드시 고유한 key를 지정해야 함 */}
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

여기서 key는 React가 각 항목을 구별하기 위한 고유 식별자입니다. 리스트를 렌더링할 때 key는 필수이며, 가능하면 배열의 index보다 데이터의 고유 id를 사용하는 것이 좋습니다.

// ✅ 고유 id가 있다면 index 대신 id 사용 권장
{users.map(user => (
  <li key={user.id}>{user.name}</li>
))}

스타일 적용하기

JSX에서 인라인 스타일은 객체 형태로 전달하며, CSS 속성명도 camelCase로 작성합니다.

function StyledBox() {
  // 스타일을 객체로 정의
  // background-color → backgroundColor 처럼 camelCase로 변환
  const boxStyle = {
    backgroundColor: "skyblue",
    fontSize: "18px",
    padding: "10px"
  };

  return (
    // style 속성에 객체를 전달 (중괄호가 두 번인 이유:
    // 바깥 {}는 JSX 표현식, 안쪽 {}는 객체 리터럴)
    <div style={boxStyle}>스타일이 적용된 박스</div>
  );
}

마무리

JSX는 처음엔 낯설지만, 몇 가지 규칙만 익히면 HTML보다 훨씬 강력하고 유연하게 UI를 표현할 수 있습니다. 핵심을 정리하면 다음과 같습니다.

• JSX는 자바스크립트 안에서 마크업을 작성하는 문법이며, 내부적으로 React.createElement로 변환된다
• 중괄호 {} 안에 자바스크립트 표현식을 넣을 수 있다
• 하나의 부모 요소로 감싸고, 모든 태그를 닫으며, 속성은 camelCase로 작성한다
• 조건부 렌더링은 삼항 연산자와 &&, 리스트 렌더링은 map()과 key를 사용한다

이 기초를 탄탄히 다져두면 앞으로 React 컴포넌트를 만드는 일이 훨씬 수월해질 것입니다.