안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리가 만든 레고 블록(컴포넌트)들은 모양이 정해져 있어서 가끔 답답할 때가 있죠? 예를 들어, 똑같은 ‘알림창’ 블록인데 어떤 때는 글자를 넣고 싶고, 어떤 때는 그림을 넣고 싶을 때가 있어요. 오늘은 블록 안에 내가 원하는 걸 무엇이든 갈아 끼울 수 있는 마법의 창문, Slot(슬롯)을 배워볼게요!
1. Slot: 비어있는 마법 공간
Slot(슬롯)은 컴포넌트라는 상자에 미리 뚫어놓은 ‘구멍’과 같아요. 상자를 만드는 사람은 “여기에 뭐가 들어올지 모르겠지만, 일단 자리를 비워둘게!”라고 약속하는 거죠.
상자를 사용하는 사람은 그 구멍 사이에 글자를 써넣을 수도 있고, 예쁜 하트 아이콘을 넣을 수도 있고, 심지어 다른 마법 블록을 통째로 집어넣을 수도 있답니다. 정말 자유롭죠?
2. 이름 있는 창문 (Named Slots)
상자에 구멍이 여러 개일 때는 이름을 붙여줄 수 있어요.
- header 슬롯: 상자의 ‘머리’ 부분에 들어갈 내용을 정해요.
- footer 슬롯: 상자의 ‘발’ 부분에 들어갈 내용을 정해요.
이름표를 붙여두면 마법 재료들이 자기 자리를 척척 찾아간답니다!
3. 실전 마법: 나만의 마법 액자 만들기
내용물을 마음대로 바꿀 수 있는 액자 블록을 코드로 살펴볼까요?
// [아이 블록: MagicCard.vue]
app.component('magic-card', {
template: `
<div class="card-frame">
<div class="title">✨ 마법 제목</div>
<!-- 여기가 바로 마법의 창문! -->
<slot>기본 내용이에요 (아무것도 안 넣으면 보여요)</slot>
</div>
`
});
// [부모 성: App.vue에서 사용하기]
<magic-card>
<p>여기에 제가 직접 쓴 일기가 들어갑니다! 📝</p>
<img src="magic-star.png" />
</magic-card>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘액자’나 ‘도시락 통’을 예로 들어 설명해 주세요. 틀은 똑같지만 그 안에 무엇을 담느냐에 따라 매일매일 다른 느낌을 줄 수 있다는 걸요. 가족 여행 사진을 보여주는 블록을 만들 때, 이 Slot 마법을 사용하면 사진마다 다른 설명을 아주 쉽게 덧붙일 수 있습니다. 이렇게 유연하게 생각하는 법을 배우면 더 복잡한 설계도 척척 해낼 수 있어요.
마치며: 조립의 왕이 되는 길
Slot 마법까지 마스터한 여러분은 이제 어떤 복잡한 블록도 자유자재로 다룰 수 있게 되었습니다. 이제 정말 프로 마법사가 다 되었네요! 다음 시간에는 **’마법 지팡이의 비밀 신호(Provide / Inject)’**라는 주제로, 아주 먼 방에 있는 가족에게 한 번에 소식을 전하는 고급 기술을 배워볼게요.
