안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 상자 속 보물의 정보를 알려주는 스코프드 슬롯(Scoped Slots)을 배웠죠? 오늘은 우리 성의 방을 아주 특별하게 만드는 법을 배울 거예요. 평소에는 공부방이었다가, 버튼 하나만 누르면 순식간에 놀이방으로 변신하는 마법의 변신 단추, Dynamic Components(동적 컴포넌트)를 소개합니다!
1. Dynamic Component: 카멜레온 같은 방
동적 컴포넌트는 상황에 따라 모습이 변하는 ‘카멜레온’과 같아요.
- 변신 마법: 여러 개의 방을 미리 만들어두고,
<component :is="...">라는 특수한 문을 사용하면 내가 선택한 방으로 즉시 변신해요. - 깔끔한 정리:
v-if를 여러 번 써서 “공부방이니? 놀이방이니?” 물어볼 필요 없이, 변신 단추 하나로 해결할 수 있답니다.
이 마법을 쓰면 탭 메뉴나 메뉴 바를 만들 때 코드가 아주 간결하고 멋져져요!
2. 왜 이 마법이 필요한가요?
- 빠른 변신: 복잡한 조건문 없이 변수 이름만 바꿔주면 화면이 짠! 하고 바뀌어요.
- 메모리 절약: 지금 당장 보여줄 방만 성에 배치하고 나머지는 잠시 접어둘 수 있어서 성이 가벼워진답니다.
3. 실전 마법: 공부방과 놀이방 변신하기
버튼을 누를 때마다 방이 바뀌는 코드를 짜볼까요? <component> 태그와 :is 속성을 사용해요!
<script setup>
import { shallowRef } from 'vue';
import StudyRoom from './StudyRoom.vue';
import PlayRoom from './PlayRoom.vue';
// 1. 처음에는 공부방을 보여줄게요!
const currentRoom = shallowRef(StudyRoom);
</script>
<template>
<div class="castle-hall">
<button @click="currentRoom = StudyRoom">📖 공부방으로 변신</button>
<button @click="currentRoom = PlayRoom">🎮 놀이방으로 변신</button>
<!-- 2. :is 마법으로 방을 즉시 바꿔요! -->
<component :is="currentRoom" />
</div>
</template>4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘변신 로봇’이나 ‘무대 배경’에 비유해 보세요. 로봇이 자동차로 변하거나, 연극 무대에서 배경 그림을 슥 갈아 끼우는 것과 똑같다고요. 아이와 함께 만든 ‘에듀패드’에서 ‘국어 시간’, ‘수학 시간’, ‘쉬는 시간’ 탭을 만들어보세요. 탭을 누를 때마다 화면 전체가 테마에 맞게 싹 바뀌는 걸 보며 아이는 자신이 직접 거대한 세상을 설계하고 있다는 즐거움을 느끼게 됩니다.
마치며: 변신술의 대가가 된 여러분
이제 여러분은 하나의 공간을 수만 가지 모습으로 바꿀 수 있는 진정한 변신술사 마법사가 되었습니다! 정말 대단해요. 다음 시간에는 **’방의 상태를 그대로! (KeepAlive)’**라는 주제로, 방을 바꿨다가 다시 돌아와도 내가 하던 공부가 사라지지 않게 기억해주는 더 똑똑한 마법을 배워볼게요! 내일 아침 9시에 만나요!
