4. JSX란?

JSX는 자바스크립트의 확장 문법으로, HTML과 비슷한 구조를 가진 문법입니다. 리액트에서는 JSX를 사용하여 UI를 구성하며, JSX 코드는 자바스크립트 객체로 변환되어 렌더링됩니다.

JSX는 다음과 같은 특징을 가집니다.

XML과 유사한 구조

JSX는 HTML과 비슷한 구조를 가지며, 태그를 사용하여 UI 요소를 구성합니다.

자바스크립트 표현식 포함 가능

JSX에서는 중괄호()를 사용하여 자바스크립트 표현식을 포함할 수 있습니다. 이를 통해 동적인 UI를 생성할 수 있습니다.

컴파일러가 자바스크립트로 변환

JSX 코드는 리액트에서 사용하는 바벨(Babel)과 같은 도구를 사용하여 자바스크립트로 변환됩니다. 이를 통해 브라우저에서 실행 가능한 코드로 변환됩니다.

예를 들어, 다음은 JSX를 사용하여 Hello World를 출력하는 예제입니다.

import React from 'react';

function App() {
  const greeting = 'Hello World';

  return (
    <div>
      <h1>{greeting}</h1>
    </div>
  );
}

export default App;