[javascript] Svelte에서 드롭다운 메뉴를 구현하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

먼저, 드롭다운 메뉴 컴포넌트를 생성합니다. 이 컴포넌트는 상태변수를 사용하여 메뉴가 열려있는지 여부를 추적합니다.

<script>
    import { onMount } from 'svelte';

    let isOpen = false;

    function toggleMenu() {
        isOpen = !isOpen;
    }

    onMount(() => {
        document.addEventListener('click', handleOutsideClick);
    });

    function handleOutsideClick(event) {
        if (!isOpen) {
            return;
        }

        const dropdown = document.querySelector('.dropdown');

        if (!dropdown.contains(event.target)) {
            isOpen = false;
        }
    }
</script>

<div class="dropdown">
    <button on:click={toggleMenu}>메뉴 열기</button>
    {#if isOpen}
        <ul>
            <li>항목 1</li>
            <li>항목 2</li>
            <li>항목 3</li>
        </ul>
    {/if}
</div>

<style>
    .dropdown ul {
        list-style: none;
        padding: 0;
    }
</style>

위 코드에서는 isOpen 변수를 사용하여 메뉴의 열림 상태를 추적합니다. toggleMenu 함수는 메뉴를 열거나 닫을 때 사용됩니다.

또한, onMount 함수를 사용하여 컴포넌트가 마운트되면 (document.addEventListener의 사용) 외부 클릭 이벤트를 처리하여 메뉴가 열린 상태에서 외부를 클릭하면 메뉴를 닫을 수 있도록 처리합니다.

마지막으로, ul 요소에는 드롭다운 메뉴의 실제 항목들을 나열합니다. 이 예시에서는 3개의 항목을 추가했습니다. 필요에 따라 항목들에 대한 추가적인 동작이나 스타일을 정의할 수 있습니다.

위 코드를 사용하면 Svelte를 사용하여 간단하게 드롭다운 메뉴를 구현할 수 있습니다. 이는 Svelte 컴포넌트의 장점을 활용하는 방법 중 하나입니다.