2 React JSX와 기본 문법: JSX란 무엇인가? HTML과의 차이점

 

JSX란 무엇인가?

JSX(JavaScript XML)는 React에서 UI를 작성할 때 사용하는 문법으로, JavaScript 코드 안에서 HTML과 유사한 문법을 사용할 수 있도록 해줍니다. JSX를 활용하면 가독성이 높아지고, 동적인 웹 애플리케이션을 더욱 직관적으로 개발할 수 있습니다.

일반적으로 웹 개발에서는 HTML, CSS, JavaScript를 각각 분리하여 사용하지만, React에서는 JSX를 사용하여 HTML과 JavaScript를 결합한 형태로 UI를 설계합니다.

JSX 기본 문법 예제

아래는 JSX를 활용하여 간단한 "Hello, React!" 메시지를 화면에 출력하는 코드입니다.

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

JSX와 HTML의 차이점

JSX는 HTML과 매우 유사하지만 몇 가지 차이점이 있습니다.

1. 태그 닫기 필수

HTML에서는 일부 태그(<br>, <img> 등)는 닫지 않아도 동작하지만, JSX에서는 모든 태그를 반드시 닫아야 합니다.

// 올바른 JSX 코드
<img src="image.jpg" alt="이미지" />

// 오류 발생 (태그를 닫지 않음)
<img src="image.jpg" alt="이미지">

2. class 대신 className 사용

HTML에서는 요소에 CSS 클래스를 적용할 때 class 속성을 사용하지만, JSX에서는 className을 사용해야 합니다.

// JSX에서 클래스 적용
<div className="container">Hello, React!</div>

3. JavaScript 표현식 사용 가능

JSX에서는 중괄호 {}를 사용하여 JavaScript 표현식을 직접 포함할 수 있습니다.

const name = "React";

function App() {
  return (
    <h1>Hello, {name}!</h1>
  );
}

JSX에서 변수와 표현식 사용법

JSX 내부에서는 JavaScript 변수를 직접 사용할 수 있으며, 다양한 표현식을 활용할 수도 있습니다.

1. 변수 출력하기

const user = "김철수";

function Greeting() {
  return <h1>안녕하세요, {user}님!</h1>;
}

2. 조건부 렌더링 (삼항 연산자 사용)

JSX에서는 삼항 연산자를 사용하여 조건부 렌더링을 쉽게 구현할 수 있습니다.

const isLoggedIn = true;

function UserStatus() {
  return (
    <h1>{isLoggedIn ? "로그인 상태입니다." : "로그아웃 상태입니다."}</h1>
  );
}

3. 배열과 map()을 활용한 리스트 렌더링

React에서 리스트를 렌더링할 때는 map() 함수를 많이 사용합니다.

const fruits = ["사과", "바나나", "체리"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

마무리

이번 장에서는 JSX의 개념과 HTML과의 차이점, 변수와 표현식 사용법에 대해 알아보았습니다. JSX를 활용하면 가독성이 좋아지고, 동적인 UI를 효율적으로 설계할 수 있습니다.

다음 장에서는 React의 컴포넌트 개념과 props(속성) 사용법에 대해 다뤄보겠습니다. React의 핵심 개념을 하나씩 익히면서 점점 더 멋진 웹 애플리케이션을 만들어 보세요!