React React 개발의 시작 JSX란?

React 개발에 꼭 필요한 핵심 문법 중 하나인 JSX에 대해 알아보겠습니다.
처음 React를 접하신 분들이 가장 먼저 궁금해하는 것 중 하나가 바로 JSX입니다.
"HTML이랑 비슷한데... 자바스크립트 안에 HTML을 쓰는 건가요?"
이런 의문을 가지고 계신다면, 이 글이 도움이 될 거예요!

JSX란?

JSX(JavaScript XML)는 자바스크립트 안에서 HTML 같은 구조를 쓸 수 있게 해주는 React의 문법 확장입니다.
JSX를 사용하면 UI를 보다 직관적이고 깔끔하게 작성할 수 있습니다.

예시:

const element = <h1>안녕하세요, React!</h1>;

이렇게 보면 HTML처럼 보이지만, 사실은 자바스크립트입니다.
React가 이 코드를 내부적으로 다음처럼 해석합니다:

const element = React.createElement('h1', null, '안녕하세요, React!');

JSX의 장점

• 가독성 좋음: HTML처럼 구조를 바로 이해할 수 있음
• 로직과 UI 결합: 조건문, 반복문 등 JS 코드를 쉽게 섞어 쓸 수 있음
• 컴포넌트 작성이 쉬움: 각 부분을 함수처럼 만들고 조립 가능

JSX에서 자주 쓰이는 문법

1. 중괄호 {}로 JS 변수나 표현식 사용하기

const name = '홍길동';
const element = <h1>안녕하세요, {name}님!</h1>;

2. 조건부 렌더링

const isLoggedIn = true;
const greeting = <h1>{isLoggedIn ? '환영합니다!' : '로그인해주세요.'}</h1>;

3. 반복 출력 (map 사용)

const fruits = ['사과', '바나나', '포도'];
const list = (
  <ul>
    {fruits.map((item, i) => <li key={i}>{item}</li>)}
  </ul>
);

JSX 작성 시 주의할 점

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

// 오류!
return (
  <h1>안녕</h1>
  <p>반가워요</p>
);

// 올바른 방식
return (
  <div>
    <h1>안녕</h1>
    <p>반가워요</p>
  </div>
);

2. class → className 사용

// JSX에서 이렇게 써야 함
<div className="box"></div>

마무리

JSX는 React의 UI를 구성하는 가장 기본적인 도구입니다.
처음엔 다소 낯설 수 있지만, 자바스크립트와 HTML을 자연스럽게 섞을 수 있는 강력한 문법입니다.
React 개발에 입문하셨다면, JSX는 반드시 익숙해져야 할 기본기입니다.