[React] JSX(JavaScript XML) 소개와 사용법

JSX는 JavaScript의 확장 문법으로, React에서 사용되는 UI 요소를 작성할 때 사용됩니다. JSX는 JavaScript 코드에서 HTML과 유사한 문법으로 UI를 작성할 수 있도록 도와주며, 가독성이 좋고 작성하기 쉬워 React 컴포넌트 개발에서 널리 사용됩니다. 아래에서 JSX의 소개와 사용법에 대해 알아보겠습니다.

---

JSX란?

JSX는 React의 핵심 요소 중 하나로, JavaScript의 확장 문법입니다. React 컴포넌트의 UI를 작성할 때 HTML과 유사한 구조를 사용하여 작성할 수 있으며, 이를 통해 코드의 가독성을 높이고 개발자들이 쉽게 이해하고 작성할 수 있도록 도와줍니다. JSX는 React 엘리먼트를 생성하고, 속성(props), 이벤트 핸들러, 자식 요소 등을 정의하는데 사용됩니다.

---

JSX 사용법

2-1. JSX 요소 생성
JSX에서는 HTML과 유사한 태그 형태로 React 엘리먼트를 생성할 수 있습니다.

// JSX 코드 예시
const element = <h1>Hello, JSX!</h1>;

위의 코드에서는 <h1>Hello, JSX!</h1>라는 JSX 코드로 React 엘리먼트를 생성합니다. 이렇게 생성된 엘리먼트는 JavaScript 객체로 변환되어 React에서 사용됩니다.

2-2. JSX 표현식 사용
JSX 내에서 중괄호 {}를 사용하여 JavaScript 표현식을 사용할 수 있습니다.

// JSX 코드 예시
const name = 'John';
const element = <h1>Hello, {name}!</h1>;

위의 코드에서 {name}은 변수 name에 저장된 값을 JSX 내부에 표현하는 표현식입니다. 이를 통해 동적인 값을 JSX에 포함시킬 수 있습니다.

2-3. JSX 속성(props) 사용
JSX 태그 내에서 속성(props)을 지정할 수 있습니다.

// JSX 코드 예시
const element = <img src="image.jpg" alt="Image" />;

위의 코드에서 <img> 태그는 src과 alt라는 속성을 가지고 있습니다. JSX에서는 HTML 속성과 마찬가지로 속성을 사용하여 컴포넌트에 정보를 전달할 수 있습니다.

2-4. JSX 자식 요소
JSX 태그는 자식 요소를 가질 수 있습니다.

// JSX 코드 예시
const element = (
  <div>
    <h1>Hello, JSX!</h1>
    <p>This is a JSX example.</p>
  </div>
);

위의 코드에서 <div> 태그는 <h1>과 <p>라는 자식 요소를 가지고 있습니다. JSX에서 여러 요소를 그룹화하기 위해 부모 요소로 감싸주는 것이 필요합니다.

2-5. JSX와 JavaScript 조합
JSX와 일반 JavaScript 코드를 함께 사용할 수 있습니다.

// JSX 코드 예시
const name = 'John';
const element = (
  <div>
    <h1>Hello, {name}!</h1>
    <p>Current time: {new Date().toLocaleTimeString()}</p>
  </div>
);

위의 코드에서 {new Date().toLocaleTimeString()}는 JavaScript 코드로, 현재 시간을 표시하는 표현식입니다. JSX 내에서 JavaScript 코드를 사용하여 동적인 데이터를 표현할 수 있습니다.

---

JSX는 React에서 UI를 작성하는데 사용되는 강력한 문법으로, HTML과 유사한 구조를 가지고 있어 컴포넌트 개발을 보다 쉽고 간편하게 할 수 있습니다. JSX를 통해 가독성이 좋은 코드를 작성하고 동적인 데이터를 쉽게 표현할 수 있으며, 이를 JavaScript 객체로 변환하여 React에서 사용합니다. JSX를 활용하여 효율적이고 강력한 React 컴포넌트를 개발해보세요!