슬롯은 컴포넌트에 서브컨텐츠를 만들어 사용하는 것을 말합니다. 이것은 재사용 되는 컴포넌트에 주로 많이 사용되는 데요, 예를 들어 button, popup창 과 같이 큰 틀은 변하지 않지만, 내용은 계속 변경되어 사용 되어지는 경우가 많을 것입니다. 이때 레이아웃은 그대로 사용하고, 안에 들어가는 내용만 변경해 재사용하는 경우를 바로 slot이라고 이해하시면 되겠습니다. 이제 코드를 보고 좀 더 자세히 설명드리도록 하겠습니다.
간단하나 box.selte 이라는 컴포넌트를 만들어 보겠습니다.
Copy <style>
.box {
width: 300px;
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
padding: 1em;
margin: 0 0 1em 0;
}
</style>
<div class="box">
<slot></slot>
</div> 이제 이 컴포넌트를 불러와 사용해 보도록 하겠습니다
Copy <script>
import Box from './Box.svelte';
</script>
<Box>
<h2>Hello!</h2>
<p>This is a box. It can contain anything.</p>
</Box> Box 라는 기본 컴포넌트 안에 들어가는 <slot></slot> 로 명명된 영역은 컴포넌트를 불러 사용하는 부모 영역에서 작성한 태그를 그대로 적용해 사용이 가능합니다.
이제 좀 더 실용적인 예제를 보도록 하겠습니다.
다음과 같이 card.svelte라는 컴포넌트를 만들어 보겠습니다.
Copy // card.svelte
<style>
.contact-card {
width: 300px;
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
padding: 1em;
}
h2 {
padding: 0 0 0.2em 0;
margin: 0 0 1em 0;
border-bottom: 1px solid #ff3e00
}
.address, .email {
padding: 0 0 0 1.5em;
background: 0 50% no-repeat;
background-size: 1em 1em;
margin: 0 0 0.5em 0;
line-height: 1.2;
}
.address { background-image: url(tutorial/icons/map-marker.svg) }
.email { background-image: url(tutorial/icons/email.svg) }
.missing { color: #999 }
</style>
<article class="contact-card">
<h2>
user name
</h2>
<div class="address">
user address
</div>
<div class="email">
user email
</div>
</article>
Copy <style>
.contact-card {
width: 300px;
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
padding: 1em;
}
h2 {
padding: 0 0 0.2em 0;
margin: 0 0 1em 0;
border-bottom: 1px solid #ff3e00
}
.address, .email {
padding: 0 0 0 1.5em;
background: 0 50% no-repeat;
background-size: 1em 1em;
margin: 0 0 0.5em 0;
line-height: 1.2;
}
.address { background-image: url(tutorial/icons/map-marker.svg) }
.email { background-image: url(tutorial/icons/email.svg) }
.missing { color: #999 }
</style>
<article class="contact-card">
<h2>
<slot name="name">
<span class="missing">Unknown name</span>
</slot>
</h2>
<div class="address">
<slot name="address">
<span class="missing">Unknown address</span>
</slot>
</div>
<div class="email">
<slot name="email">
<span class="missing">Unknown email</span>
</slot>
</div>
</article> 이 컴포넌트에 name, addrss, email 이라는 3가지의 slot을 가지게 됩니다.
이제 이 card 컴포넌트를 불러와 사용해 보겠습니다.
Copy <script>
import Card from './card.svelte';
</script>
<Card>
<span slot="name">
P. Sherman
</span>
<span slot="address">
42 Wallaby Way<br>
Sydney
</span>
</Card> 이제 결과를 보시면 알겠지만, 각 slot 에 필요한 내용이 채워진 것을 볼 수 있습니다 그리고 사용하지 않은 값은 card.svelte에서 설정한 기본 값으로 표시된 것을 볼 수 있습니다 . <span class="missing">Unknown email</span>
그리고 이런 HTML영역 뿐이라니 prop나 dispatch 통해 상위 컴포넌트에 값을 전달 받거나 전달하는 등의 기능도 수행 가능합니다.
[만들면서 배우는 Svelte]
