React 애플리케이션을 개발할 때 JSX(JavaScript XML)는 컴포넌트의 UI를 표현하는 데 사용됩니다. JSX는 HTML과 유사한 구문을 사용하여 JavaScript 코드에 마크업을 쉽게 포함할 수 있도록 도와줍니다.

JSX 요소

JSX를 사용하면 React 컴포넌트의 UI를 만들기 위해 HTML과 유사한 구문을 사용할 수 있습니다. 아래는 JSX에서의 요소 생성 예시입니다.

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a React app.</p>
    </div>
  );
}

위의 예제에서 <div>와 <h1>, <p>와 같은 태그들은 JSX에서 요소를 나타냅니다.

JSX 속성

JSX 요소에는 HTML 요소와 유사하게 속성을 포함할 수 있습니다. 이러한 속성은 컴포넌트에 데이터를 전달하거나 스타일을 지정하는 용도로 사용됩니다.

아래는 JSX에서의 속성 사용 예시입니다.

function App() {
  return (
    <div id="main" className="container">
      <h1 style={{ color: 'blue' }}>Hello, World!</h1>
      <p>This is a React app.</p>
    </div>
  );
}

위의 예제에서 id, className과 style 속성은 JSX에서의 속성을 나타냅니다.

JSX의 요소와 속성은 React 애플리케이션 개발에서 매우 중요한 부분이므로 정확하게 이해하는 것이 필요합니다.

더 궁금한 것이 있거나 자세한 내용이 필요하다면 React 공식 문서를 확인해보시기를 권장합니다.

React 공식 문서