[javascript] Svelte에서 테이블을 구현하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

먼저, Svelte 컴포넌트를 생성하고 테이블에 필요한 데이터를 가져와야 합니다. 이 예제에서는 data 배열을 사용하도록 하겠습니다.

<script>
  let data = [
    { name: 'John Doe', age: 25, email: 'john@example.com' },
    { name: 'Jane Smith', age: 30, email: 'jane@example.com' },
    { name: 'Mark Johnson', age: 40, email: 'mark@example.com' }
  ];
</script>

이제, HTML 부분에서 table 요소와 thead, tbody 요소를 추가하여 테이블의 구조를 만듭니다.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    {#each data as person}
    <tr>
      <td>{person.name}</td>
      <td>{person.age}</td>
      <td>{person.email}</td>
    </tr>
    {/each}
  </tbody>
</table>

위 코드에서 {#each ... as ...} 구문은 데이터 배열을 순회하면서 각 요소를 렌더링하는 반복문입니다. 여기서 person은 임시 변수로 사용되며, 각 데이터 객체의 속성을 출력하여 테이블 셀을 생성합니다.

이제 Svelte 컴포넌트의 나머지 부분을 설정하고 원하는 스타일을 적용하면 됩니다. 이렇게 하면 Svelte에서 간단하게 테이블을 구현할 수 있습니다.

더 자세한 내용은 Svelte 공식 문서를 참조하시기 바랍니다.