이번에는 TypeScript에서 JSX(JavaScript XML) 문법을 사용하는 방법에 대해 알아보겠습니다.

1. 기본 JSX 문법

JSX는 JavaScript의 확장 문법으로, HTML과 유사한 문법을 사용하여 UI를 구성할 수 있습니다. TypeScript에서 JSX를 사용하려면 파일의 확장자를 .tsx로 지정해야 합니다.

다음은 간단한 JSX 문법의 예제입니다.

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, TypeScript JSX!</h1>
      <p>This is a JSX example in TypeScript.</p>
    </div>
  );
};

export default App;

위 예제에서는 div와 h1, p 태그를 사용하여 UI를 정의하고 있습니다. JSX를 사용하면 DOM 요소를 직접 작성할 수 있어서 컴포넌트를 보다 직관적으로 작성할 수 있습니다.

2. JSX 안에서 표현식 사용하기

JSX 내부에서 중괄호({})를 사용하여 JavaScript 표현식을 포함할 수 있습니다. 이를 활용하면 동적인 값과 함수를 JSX에 쉽게 적용할 수 있습니다.

다음은 JSX 내에서 표현식을 사용하는 예제입니다.

import React from 'react';

const App = () => {
  const name = 'John';
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Current time: {new Date().toLocaleTimeString()}</p>
    </div>
  );
};

export default App;

위 예제에서는 name 변수와 new Date().toLocaleTimeString() 표현식을 JSX에 포함시켜 화면에 동적인 내용을 표시하고 있습니다.

3. 참고 자료

• TypeScript Handbook - JSX

이상으로 TypeScript에서 JSX 문법을 활용하는 방법에 대해 알아보았습니다. JSX를 사용하면 보다 동적이고 가독성 있는 UI를 손쉽게 구성할 수 있습니다.