[javascript] Svelte에서 탭(tab) 기능을 구현하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

먼저, Svelte 컴포넌트의 상태를 사용하여 현재 선택된 탭을 추적합니다. 이를 위해 Svelte의 let 키워드를 사용할 수 있습니다.

<script>
  let selectedTab = 0; // 초기 선택된 탭 (0부터 시작)

  function selectTab(tabIndex) {
    selectedTab = tabIndex;
  }
</script>

그리고 해당 탭을 표시하기 위한 HTML 코드를 작성합니다. selectedTab 변수를 사용하여 현재 선택된 탭을 표시할 수 있습니다. 또한 on:click 이벤트 핸들러를 사용하여 탭을 클릭했을 때 selectTab 함수를 호출합니다.

<div class="tabs">
  <div class="tab" class:selected={selectedTab === 0} on:click={() => selectTab(0)}>Tab 1</div>
  <div class="tab" class:selected={selectedTab === 1} on:click={() => selectTab(1)}>Tab 2</div>
  <div class="tab" class:selected={selectedTab === 2} on:click={() => selectTab(2)}>Tab 3</div>
</div>

<div class="tab-content">
  {#if selectedTab === 0}
    <p>Tab 1 Content</p>
  {:else if selectedTab === 1}
    <p>Tab 2 Content</p>
  {:else if selectedTab === 2}
    <p>Tab 3 Content</p>
  {/if}
</div>

위의 코드에서는 class:selected를 사용하여 선택된 탭에 스타일을 적용할 수 있습니다. 또한 selectedTab 변수에 따라 해당 탭의 컨텐츠를 표시하기 위해 {#if} {:else if} {/if} 구문을 사용하였습니다. 이를 통해 선택된 탭의 컨텐츠를 동적으로 변경할 수 있습니다.

이제 위의 코드를 사용하여 탭 기능을 구현할 수 있습니다. 코드를 실행하면 각 탭을 클릭할 때마다 해당하는 컨텐츠가 표시됩니다.

더 자세한 내용은 Svelte 공식 문서(https://svelte.dev/)를 참조하시기 바랍니다.