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

24 Nov 2023

javascript

먼저, Svelte에서 탭(tab)을 구현하는 가장 간단한 방법은 activeTab 변수를 사용하여 현재 선택된 탭을 추적하는 것입니다. 탭을 클릭할 때마다 activeTab 변수를 업데이트하여 해당 탭에 대한 내용을 표시할 수 있습니다.

아래는 Svelte에서 탭(tab)을 구현하는 간단한 예제입니다.

<script>
  let activeTab = 'tab1';
</script>

<style>
  .tab {
    display: none;
  }

  .tab.current {
    display: block;
  }
</style>

<div>
  <button on:click={() => activeTab = 'tab1'}>Tab 1</button>
  <button on:click={() => activeTab = 'tab2'}>Tab 2</button>
  <button on:click={() => activeTab = 'tab3'}>Tab 3</button>
</div>

<div class="tab {activeTab === 'tab1' && 'current'}">
  <!-- Tab 1 내용 -->
</div>

<div class="tab {activeTab === 'tab2' && 'current'}">
  <!-- Tab 2 내용 -->
</div>

<div class="tab {activeTab === 'tab3' && 'current'}">
  <!-- Tab 3 내용 -->
</div>

위의 코드에서는 activeTab 변수를 사용하여 선택된 탭을 추적합니다. 각 탭 버튼은 on:click 이벤트 핸들러를 통해 activeTab 변수를 업데이트하고, 해당 탭에 대한 내용을 표시하는 CSS 클래스를 추가합니다.

이 코드를 실행하면 탭을 클릭할 때마다 선택된 탭에 대한 내용이 표시되는 것을 확인할 수 있습니다.

Svelte를 사용하면 탭(tab)을 구현하는 다양한 방법이 있을 수 있습니다. 이 예제는 가장 간단하고 기본적인 방법을 보여주었으며, 필요에 따라 다양한 디자인과 기능을 추가할 수 있습니다.