Svelte 모달창으로 이해하기

Modal.svelte

<script\>

export let msg \= "Base text";

export let showmodal \= true;

</script\>



<main\>

{#if showmodal}

<div class\="backdrop"\>

<div class\="modal"\>

<p\>{msg}</p\>

</div\>

</div\>

{/if}

</main\>



<style\>

.backdrop {

width: 100vw;

height: 100vh;

background: rgba(0, 0, 0, 0.384);

position: absolute;

top: 0;

left: 0;

}

.modal {

width: 50vw;

height: 20vh;

background-color: white;

border-radius: 10px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(\-50%, \-50%);

}

p {

text-align: center;

}

</style>

여기서 알수있는점

• 변수를 export 하면, 외부에서 속성으로 접근이 가능하다(props 개념)
• props로 전달해주는 key와 value의 이름이 같다면 {변수명} 으로 생략할 수 있다

<script>

  let showmodal = true;
</script>

<main>
  <Modal msg="가세요!" {showmodal} />
</main>

slot

react 의 children 개념처럼, 컴포넌트 태그사이에 넣은 요소를 으로 가져올 수 있다

App.svelte

  <Modal msg="가세요!" {showmodal} on:click={handleModal}>
    <form>
      <input type="text" />
      <button>here!</button>
    </form>
  </Modal>

Modal.svelte

<main>
  {#if showmodal}
    <div class="backdrop" on:click|self>
      <div class="modal">
        <p>{msg}</p>
        <slot />
      </div>
    </div>
  {/if}
</main>