Frontend/React

JSX란 무엇인가? HTML처럼 보이지만 다른 리액트의 핵심 문법

미니임 2026. 2. 24. 15:13

 

리액트(React)를 처음 접하면 가장 먼저 마주하게 되는 생소한 문법이 있습니다. 바로 **JSX(JavaScript XML)**입니다. HTML과 똑같이 생겼는데 자바스크립트 파일 안에서 사용되는 이 기묘한 문법은 과연 무엇일까요?

오늘은 JSX의 정의부터 특징, 그리고 실무에서 자주 사용되는 다양한 예제들을 통해 JSX를 완벽하게 파헤쳐 보겠습니다.

1. JSX란?

JSX는 자바스크립트의 확장 문법입니다. 리액트 엔진은 이 JSX를 브라우저가 이해할 수 있는 일반 자바스크립트로 변환하여 실행합니다.

우리가 작성한 JSX 코드는 내부적으로 다음과 같이 변환됩니다.

코드 비교: JSX vs 일반 JS

JSX 방식:

const element = <h1 className="title">안녕하세요, 리액트!</h1>;

일반 자바스크립트 방식 (Babel 변환 후):

const element = React.createElement(
  'h1',
  { className: 'title' },
  '안녕하세요, 리액트!'
);

보시는 것처럼 JSX를 사용하면 코드가 훨씬 직관적이고 가독성이 좋아집니다. 개발자는 복잡한 함수 호출 대신 HTML 구조를 짜듯 UI를 설계할 수 있습니다.

2. JSX의 핵심 규칙과 예제

JSX는 HTML과 유사해 보이지만, 자바스크립트 문법을 기반으로 하기 때문에 반드시 지켜야 할 몇 가지 규칙이 있습니다.

① 반드시 하나의 부모 요소로 감싸야 합니다

JSX는 여러 요소를 반환할 때 반드시 하나의 태그로 감싸야 합니다. 만약 불필요한 <div> 태그를 만들고 싶지 않다면 리액트의 **Fragment(<> </>)**를 사용하면 됩니다.

잘못된 예:

function MyComponent() {
  return (
    <h1>제목</h1>
    <p>내용</p> // 오류 발생!
  );
}

올바른 예:

function MyComponent() {
  return (
    <>
      <h1>제목</h1>
      <p>내용</p>
    </>
  );
}

② 자바스크립트 표현식은 중괄호 {}를 사용합니다

JSX 내부에서 자바스크립트 변수나 함수를 사용하고 싶을 때는 {}로 감싸줍니다.

function Greeting() {
  const name = '홍길동';
  const userStatus = 'Gold';

  return (
    <div>
      <h1>{name}님, 반갑습니다!</h1>
      <p>현재 등급은 {userStatus}입니다.</p>
      <p>내년 나이는 {20 + 10}세입니다.</p>
    </div>
  );
}

③ class가 아니라 className을 사용합니다

HTML에서는 class 속성을 사용하지만, 자바스크립트에서 class는 예약어(Reserved Word)이기 때문에 리액트에서는 className이라는 이름을 사용합니다.

// HTML: <div class="container"></div>
// JSX:
<div className="container">
  콘텐츠 내용
</div>

3. 실전 예제: 조건부 렌더링과 리스트

JSX의 진가는 데이터에 따라 UI를 동적으로 생성할 때 나타납니다.

예제 1: 삼항 연산자를 이용한 조건부 렌더링

로그인 상태에 따라 다른 화면을 보여주고 싶을 때 유용합니다.

function AuthStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <button>로그아웃</button>
      ) : (
        <button>로그인하기</button>
      )}
    </div>
  );
}

예제 2: map() 함수를 이용한 리스트 렌더링

배열 데이터를 반복해서 보여줄 때는 자바스크립트의 .map() 메서드를 활용합니다. 이때 각 요소에는 반드시 고유한 key 값이 필요합니다.

function ProductList() {
  const products = [
    { id: 1, name: '노트북', price: '1,500,000원' },
    { id: 2, name: '스마트폰', price: '1,000,000원' },
    { id: 3, name: '태블릿', price: '800,000원' },
  ];

  return (
    <ul>
      {products.map((item) => (
        <li key={item.id}>
          <strong>{item.name}</strong> - {item.price}
        </li>
      ))}
    </ul>
  );
}

4. JSX 작성 시 주의할 점 (Inline Style)

JSX에서 스타일을 직접 지정할 때는 문자열이 아닌 객체 형태로 전달해야 합니다. 또한, font-size 같은 대시(-) 기호가 들어간 속성은 fontSize와 같이 **카멜 케이스(camelCase)**로 작성합니다.

function StyledComponent() {
  const style = {
    backgroundColor: 'black',
    color: 'white',
    fontSize: '20px',
    padding: '10px'
  };

  return <div style={style}>스타일이 적용된 박스</div>;
}

마치며

JSX는 리액트 개발의 생산성을 높여주는 강력한 도구입니다. 처음에는 자바스크립트와 HTML이 섞여 있는 모습이 낯설 수 있지만, "자바스크립트로 변환되는 문법"이라는 점을 기억한다면 금방 익숙해질 것입니다.

오늘 정리한 규칙들을 바탕으로 직접 코드를 작성해 보며 리액트의 매력을 느껴보시길 바랍니다!

반응형