안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 이름표가 붙은 마법 구멍(Named Slots)을 통해 보물을 제자리에 넣는 법을 배웠죠? 오늘은 더 신기한 마법을 부려볼 거예요. 상자 안에 숨겨진 비밀 보물을 밖으로 꺼내서, 밖에서 내 마음대로 모양을 바꿀 수 있게 해주는 보물 전달 마법, Scoped Slots(스코프드 슬롯)을 배워볼게요!
1. Scoped Slot: 상자 속 재료로 요리하기
Scoped Slot은 ‘재료가 담긴 요리 키트’와 같아요. 상자(컴포넌트) 안에는 맛있는 ‘사과’와 ‘설탕’이라는 재료(데이터)가 들어있어요.
이 마법을 쓰면 상자가 밖으로 “여기 사과랑 설탕이 있어! 이걸로 뭘 만들래?”라고 재료를 던져준답니다. 그러면 우리는 밖에서 그 재료를 받아 ‘사과 파이’를 만들 수도 있고, ‘사과 주스’를 만들 수도 있어요. 상자 안의 보물을 밖에서 내 마음대로 요리할 수 있게 되는 거죠!
2. 왜 이 마법이 필요한가요?
- 똑똑한 정보 전달: 상자가 가진 비밀 정보(점수, 이름 등)를 밖에서 사용자가 원하는 모양으로 예쁘게 꾸밀 수 있어요.
- 자유로운 변신: 목록 상자를 하나 만들면, 어떤 곳에서는 ‘글자 목록’으로 쓰고 다른 곳에서는 ‘사진 목록’으로 변신시킬 수 있답니다.
3. 실전 마법: 보물 점수를 요리하는 상자
상자 속 점수를 밖에서 하트나 별로 바꾸는 마법 코드를 짜볼까요?
<!-- 1. 보물을 나눠주는 상자 (TreasureBox.vue) -->
<template>
<div class="box">
<!-- 'score'라는 보물을 밖으로 던져줘요! -->
<slot :score="100"></slot>
</div>
</template>
<!-- 2. 밖에서 보물 요리하기 (App.vue) -->
<template>
<TreasureBox v-slot="slotProps">
<!-- 상자가 던져준 score 보물을 'slotProps'로 받아서 요리해요! -->
<p>보물을 받았어요! 점수는 바로 {{ slotProps.score }}점!</p>
<span v-if="slotProps.score >= 100">⭐⭐⭐ 최고예요!</span>
</TreasureBox>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘색칠 공부’에 비유해 보세요. 밑그림(데이터)은 상자가 그려주지만, 그 그림을 빨간색으로 칠할지 파란색으로 칠할지는 우리가 밖에서 정하는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 ‘오늘의 할 일 목록’을 만들어 보세요. 할 일을 다 했을 때 상자가 넘겨주는 ‘완료’ 정보를 받아서, 밖에서 예쁜 스티커가 나타나게 요리해 보는 거죠. 이렇게 정보가 이동하는 원리를 이해하면 아이의 문제 해결 능력이 쑥쑥 자라납니다.
마치며: 진정한 마법 요리사가 된 여러분
이제 여러분은 상자 안팎을 넘나들며 데이터를 자유자재로 다루는 최고 수준의 슬롯 마법사가 되었습니다! 정말 대단해요! 다음 시간에는 **’마법의 텔레포트(Teleport)’**라는 주제로, 화면의 여기저기로 마법을 순간 이동시키는 신기한 기술을 배워볼게요! 내일 이 시간에 만나요!
