[typescript] JSX에서 리스트 렌더링 작성하는 방법

18 Dec 2023

typescript

JSX를 사용하여 TypeScript에서 리스트를 렌더링하는 방법에 대해 알아보겠습니다.

배열을 사용한 리스트 렌더링

import * as React from 'react';

const myList: string[] = ['Apple', 'Banana', 'Orange'];

const MyList: React.FC = () => {
  return (
    <ul>
      {myList.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default MyList;

myList 배열을 map 함수를 사용하여 JSX로 변환하여 리스트를 렌더링합니다. 각 항목에는 key prop이 필요합니다.

JSX와 TypeScript 제네릭을 사용한 리스트 렌더링

import * as React from 'react';

interface ListItem {
  id: number;
  name: string;
}

const items: ListItem[] = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Orange' },
];

const List: React.FC<{ items: ListItem[] }> = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

const App: React.FC = () => {
  return <List items={items} />;
};

export default App;

위 예제는 TypeScript의 인터페이스를 사용하여 목록 항목의 유형을 정의하고, 제네릭을 사용하여 해당 유형을 컴포넌트에 전달합니다.

이제 JSX를 사용하여 TypeScript에서 리스트를 렌더링하는 방법을 알게 되었습니다. 리스트 렌더링을 위한 다양한 방법을 적용하여 프로젝트에 맞게 활용할 수 있습니다.

마치며

이제 TypeScript와 JSX를 사용하여 리스트를 렌더링하는 방법에 대해 알아보았습니다. 각 항목을 고유하게 식별할 수 있는 key를 제공하여 배열을 JSX 엘리먼트로 변환하는 방법을 살펴보았습니다. 이러한 기술을 사용하여 React 애플리케이션을 보다 동적으로 작성할 수 있습니다.