안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 무엇이든 담을 수 있는 마법 액자(Slot)를 배웠죠? 그런데 상자에 구멍이 하나뿐이라 제목이랑 내용을 한꺼번에 넣으려니 조금 뒤섞여 보이지 않았나요? 오늘은 상자에 여러 개의 구멍을 뚫고, 이름표를 붙여서 보물들을 제자리에 쏙쏙 넣는 이름표 마법 구멍, Named Slots(네임드 슬롯)을 배워볼게요!
1. Named Slot: 이름표가 달린 보물칸
Named Slot은 서랍장과 같아요. 맨 위 서랍에는 ‘양말’, 가운데 서랍에는 ‘티셔츠’라고 써 붙여두면 옷을 정리하기 훨씬 편하겠죠?
마법 상자(컴포넌트)를 만들 때 name="header", name="content"처럼 구멍마다 이름을 지어주는 거예요. 그러면 우리가 상자를 쓸 때 “이 금화는 ‘header’ 구멍에 넣어줘!”라고 정확하게 명령할 수 있답니다. 위치가 딱딱 정해지니 상자가 훨씬 깔끔해져요!
2. 왜 이 마법이 필요한가요?
- 정해진 위치: 제목은 항상 맨 위에, 버튼은 항상 맨 아래에 오도록 디자인을 고정할 수 있어요.
- 골라 채우기: 어떤 구멍은 채우고, 어떤 구멍은 비워두는 등 내 마음대로 상자를 꾸밀 수 있답니다.
3. 실전 마법: 칸이 나뉜 알림 상자 만들기
제목칸과 내용칸이 따로 있는 멋진 상자 코드를 짜볼까요?
<!-- 1. 이름표 구멍이 있는 상자 (SmartBox.vue) -->
<template>
<div class="smart-box">
<header>
<!-- 'header'라는 이름의 구멍이에요 -->
<slot name="header">기본 제목</slot>
</header>
<main>
<!-- 이름이 없는 기본 구멍이에요 -->
<slot>여기는 내용이 들어와요.</slot>
</main>
</div>
</template>
<!-- 2. 상자에 보물 넣기 (App.vue) -->
<template>
<SmartBox>
<!-- v-slot:이름 주문을 사용해요! -->
<template v-slot:header>
<h1>🎉 축하합니다!</h1>
</template>
<p>오늘의 칭찬 스티커를 획득하셨어요!</p>
</SmartBox>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘식판’에 비유해 보세요. 밥 넣는 칸, 국 넣는 칸, 반찬 넣는 칸이 정해져 있어야 음식이 섞이지 않고 맛있게 먹을 수 있는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 ‘오늘의 학습 알림창’을 디자인해 보세요. 상단에는 ‘오늘의 과목’ 이름을 넣고, 가운데는 ‘학습 내용’을 넣는 식이죠. 이렇게 칸을 나누어 생각하는 연습은 아이의 구조적 사고력을 높여줍니다.
마치며: 정리 정돈의 달인이 된 여러분
이제 여러분은 복잡한 정보도 이름표를 붙여 척척 정리하는 고수 마법사가 되었습니다! 다음 시간에는 **’데이터를 돌려주는 구멍(Scoped Slots)’**이라는 주제로, 상자가 가지고 있는 보물을 밖으로 꺼내서 보여주는 더 신기한 기술을 배워볼게요! 내일 아침 9시에 만나요!
