안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 나갔다 와도 그대로 기억해주는 마법 가루(KeepAlive)를 배웠죠? 오늘은 우리 성의 인테리어를 훨씬 멋지게 만들어줄 도구를 가져왔어요. 모양은 똑같은 액자인데, 어떤 날은 그림을 넣고 어떤 날은 거울을 넣을 수 있는 마법 액자, Slots(슬롯)을 배워볼게요!
1. Slot: 무엇이든 담을 수 있는 빈 공간
Slot은 컴포넌트라는 상자 안에 미리 뚫어놓은 ‘구멍’과 같아요. 우리가 예쁜 상자(컴포넌트)를 하나 만들었을 때, 그 안에 사탕을 넣을지 초콜릿을 넣을지 미리 정하지 않아도 돼요.
상자를 사용할 때마다 “오늘은 여기에 곰 인형을 넣어줘!”라고 말하면, 그 구멍을 통해 곰 인형이 쏙 들어가서 상자의 주인공이 된답니다. 똑같은 상자를 여러 번 재활용할 수 있는 아주 경제적인 마법이죠!
2. 왜 이 마법이 필요한가요?
- 똑똑한 재사용: 알림창의 디자인은 똑같은데, ‘경고’ 메시지를 넣을 때와 ‘축하’ 메시지를 넣을 때마다 새로 만들 필요가 없어요.
- 자유로운 변신: 상자 안에 글자만 넣을 수도 있고, 다른 마법 도구(버튼, 이미지)를 통째로 넣을 수도 있답니다.
3. 실전 마법: 무엇이든 담는 마법 상자 만들기
상자 틀을 만들고 그 안에 내용을 채워 넣는 코드를 짜볼까요?
<!-- 1. 마법 상자 틀 (MagicBox.vue) -->
<template>
<div class="box-style">
<h3>🎁 마법 상자</h3>
<!-- 여기가 바로 무엇이든 들어올 수 있는 구멍이에요! -->
<slot>비어있으면 제가 나타나요!</slot>
</div>
</template>
<!-- 2. 상자 사용하기 (App.vue) -->
<template>
<MagicBox>
<p>오늘은 맛있는 딸기 케이크를 넣었어요! 🍰</p>
<button>냠냠 먹기</button>
</MagicBox>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘도시락통’에 비유해 보세요. 도시락통의 모양은 변하지 않지만, 그 안에 김밥을 담으면 김밥 도시락이 되고 샌드위치를 담으면 샌드위치 도시락이 되는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 쓸 ‘칭찬 스티커 판’을 만들어 보세요. 판의 모양은 일정하지만, 그 안에 들어갈 스티커 그림만 슬롯을 통해 매일매일 바꿔줄 수 있답니다. 이렇게 공통점과 차이점을 구분하는 습관은 아이의 논리적 사고를 크게 도와줍니다.
마치며: 조립식 마법의 고수가 된 여러분
이제 여러분은 하나의 틀로 수만 가지 모양을 만들어내는 조립식 마법의 기초를 뗐습니다! 다음 시간에는 **’이름표가 붙은 주머니(Named Slots)’**라는 주제로, 한 상자 안에 여러 개의 구멍을 뚫어 더 복잡한 물건들을 정리해 넣는 비법을 배워볼게요!
