Svelte에서 모달을 구현하는 방법 중 하나는 상태 변수를 사용하여 모달이 열리거나 닫히는 상태를 추적하는 것입니다. 다음은 Svelte에서 간단한 모달창을 구현하는 코드의 예입니다:

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

    let showModal = false;

    onMount(() => {
      showModal = true; // 페이지 로드 시 모달창을 열기 위해 초기값을 true로 설정
    });

    function closeModal() {
      showModal = false;
    }
</script>

<button on:click={closeModal}>Close Modal</button>

{#if showModal}
  <div class="modal">
    <!-- 모달 콘텐츠 -->
  </div>
{/if}

<style>
  .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }
</style>

위 코드에서 showModal 변수는 모달이 열리거나 닫히는 상태를 추적합니다. 초기값은 false로 설정되어 있으므로, 페이지가 로드되면 모달은 닫혀있는 상태입니다.

onMount 함수는 페이지가 로드되었을 때 한 번 실행됩니다. 이 함수에서 showModal 변수를 true로 설정하여 모달을 엽니다.

closeModal 함수는 모달을 닫기 위해 사용됩니다. 이 함수는 닫기 버튼 클릭 이벤트에 연결되어 있습니다. 버튼을 클릭하면 showModal 변수가 false로 설정되어 모달이 닫힙니다.

조건부 블록 {#if}과 {/if} 사이에 있는 HTML 코드는 showModal 변수가 true일 때만 렌더링됩니다. 따라서 모달이 열려 있는 동안에만 화면에 표시됩니다.

위 코드에서는 모달 스타일링을 위해 CSS도 포함되어 있습니다. 스타일은 모달이 화면 중앙에 위치하도록 설정하고, 배경 색상과 그림자를 추가합니다.

이 코드를 실행하면 간단한 모달 창이 나타나고 “Close Modal” 버튼을 클릭하여 모달을 닫을 수 있습니다.

이와 비슷한 방식으로 팝업 창을 구현할 수도 있습니다. 팝업이 모달과 다른 점이 있다면 팝업은 사용자와의 상호작용을 필요로 하는 경우 뒷 배경을 가리지 않고 표시될 수 있다는 것입니다. 이 경우 팝업 창이 닫히면 배경이 열리는 모양으로 표시됩니다.

여기서는 간단한 모달 창을 구현하는 방법을 알아보았습니다. Svelte를 사용하면 더 복잡한 모달이나 팝업 창을 구현하는 것도 가능합니다. Svelte는 컴포넌트 기반 구조로 구성되어 있으므로 모달과 팝업 창을 독립적인 컴포넌트로 만들어서 재사용할 수도 있습니다.