작성한 질문수 64

1

저 같은 경우 보통 재사용이 많이 발생하는 컴포넌트의 경우 props와 slot을 함께 이용하는 경우가 많습니다. 다음은 modal팝업을 간단하게 재사용 가능한 컴포넌트로 만든 예제인데요. modal의 제목과 내용을을 <slot name="header"></slot>, <slot ></slot> 로 정의하고, modal이 나타나고 사라지는 것은 export let modalActive = false로 해서 세팅해주면, 필요한 부분에서 이 모달 컴포넌트를 불러서 사용할 수 있습니다. 요약하자면, 반복적으로 나타나는 html영역은 slot으로 하시고, 동적 제어는 props로 하면 된다고 이해사시면 되겠습니다.

//-- modal.svelte -----------------------

<script>
	export let modalActive = false
	
	function close() {
		modalActive = false
	}
</script>

{#if modalActive}
	<div class="modal-background" on:click={close} ></div>

	<div class="modal" role="dialog" aria-modal="true" >
		<slot name="header"></slot>
		<hr>
		<slot></slot>
		<hr>

		<!-- svelte-ignore a11y-autofocus -->
		<button autofocus on:click={close}>close modal</button>
	</div>
{/if}

//-- app.svelte -----------------------
<script>
	import Modal from './modal.svelte'
	let modalActive
	let modalActive1 = false
	let modalActive2 = false
</script>

<button on:click={() => modalActive1 = true}>
	Modal PopUp 1
</button>

<button on:click={() => modalActive2 = true}>
	Modal PopUp 2
</button>

<Modal bind:modalActive={modalActive1}>
	<h2 slot="header">MODAL POPUP TITLE 1</h2>
	<p>MODAL POPUP CONTENT 1</p>
</Modal>

<Modal bind:modalActive={modalActive2}>
	<h2 slot="header">MODAL POPUP TITLE 2</h2>
	<p>MODAL POPUP CONTENT 2</p>
</Modal>

0

감사합니다! 이해 했어요!