JSX

react에서 사용하는 js의 확장 문법.
js 코드 안에서 xml 형태로 작성할 수 있게 해주는 문법적 확장.
주로 react 애플리케이션에서 ui를 정의하는 데 사용됨.

jsx는 개발자가 react 컴포넌트의 구조와 모양을 더 직관적으로 표현할 수 있게 도와줌.
ex. js에서 DOM Element 를 생성하려면 많은 createElement를 사용해야 함 -> JSX 사용 간단

특징

1. XML 형태의 문법
   HTML과 유사한 형태의 문법을 사용. JS 코드 안에서 XML 형태로 작성
2. React 앨리먼트 생성
   JSX 사용시 React 앨리먼트를 더 직관적으로 작성 할 수 있음.
3. JS 표현식 포함
   중괄호 '{}' 사용하여 JS 표현식을 JSX에 포함 할 수 있음.

import React from 'react';

const MyComponent = () => {
  const name = 'John Doe';
  
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>This is a JSX example.</p>
    </div>
  );
};

export default MyComponent;

JSX가 JS로 변환 되는 방법

Babel과 같은 트랜스파일러를 사용하여 처리됨
트랜스 파일러는 JSX 문법을 React.createElement 함수 호출로 변환하여 브라우저에서 이해할 수 있는 js 코드로 바꿔 줌.

예시

JSX 코드

const element = <h1>Hello, World!</h1>;

Babel 변환 결과

const element = React.createElement('h1', null, 'Hello, World!');