JSX란? HTML과의 차이와 기본 문법

JSX는 JavaScript 안에서 UI 구조를 표현할 수 있는 문법 확장입니다. HTML과 비슷하게 보이지만 문자열이나 HTML 파일 자체는 아닙니다. 빌드 도구가 JavaScript 호출 형태로 변환한 뒤 실행합니다.

JavaScript와 마크업을 함께 표현하기

export default function Greeting() {
  const name = "성근";

  return (
    <section className="greeting">
      <h2>{name}님, 안녕하세요.</h2>
      <p>오늘도 하나씩 기록합니다.</p>
    </section>
  );
}

중괄호 {} 안에는 JavaScript 표현식을 넣습니다. 변수, 함수 호출, 삼항 연산자 등을 사용할 수 있지만 if문 자체를 넣을 수는 없습니다. 조건문이 필요하면 JSX 바깥에서 처리하거나 표현식으로 작성합니다.

HTML과 다른 규칙

aria-*와 data-* 속성은 HTML처럼 하이픈 표기를 유지합니다. 사용자 정의 컴포넌트 이름은 대문자로 시작하여 기본 HTML 태그와 구분합니다.

목록과 조건부 표시

export default function TopicList() {
  const topics = [
    { id: "js", name: "JavaScript" },
    { id: "cs", name: "컴퓨터 과학" },
  ];

  return (
    <ul>
      {topics.map(topic => (
        <li key={topic.id}>{topic.name}</li>
      ))}
    </ul>
  );
}

이 컴포넌트를 표시하면 두 항목이 나와야 합니다. key에는 형제 항목 사이에서 고유하고 안정적인 식별자를 사용합니다. 변경될 수 있는 목록에서 배열 인덱스를 식별자로 쓰면 항목의 상태가 잘못 연결될 수 있습니다.

JSX가 바로 DOM은 아니다

JSX는 화면에 무엇이 있어야 하는지 설명합니다. React는 그 결과를 사용해 실제 DOM을 갱신합니다. JSX 없이도 React를 사용할 수 있으며, JSX를 사용한다는 이유만으로 브라우저가 그 문법을 직접 실행하는 것은 아닙니다.

참고

• React — Writing Markup with JSX