안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 재료가 올 때까지 친절하게 기다려주는 Suspense 마법을 배웠죠? 오늘은 그 마법을 더 똑똑하게 써먹는 방법을 배울 거예요. 웹사이트가 처음 시작할 때 모든 방을 한꺼번에 다 지으려면 시간이 너무 오래 걸려요. 그래서 평소에는 숨겨두었다가, 우리가 버튼을 누르는 순간에만 짠! 하고 나타나게 하는 비동기 컴포넌트(Async Components) 마법을 배워볼게요!
1. 비동기 컴포넌트: 가벼운 여행 가방 만들기
비동기 컴포넌트는 여행을 갈 때 모든 옷을 입고 가는 게 아니라, 가방에 넣어두었다가 호텔에 도착해서 필요할 때만 꺼내 입는 것과 같아요.
웹사이트도 처음 문을 열 때는 거실(메인 화면)만 보여주고, ‘수영장’이나 ‘비밀의 방’ 같은 곳은 우리가 가고 싶을 때만 인터넷에서 다운로드해서 지어주는 거예요. 덕분에 우리 성은 아주 가볍고 빠르게 문을 열 수 있답니다.
2. 마법 주문: defineAsyncComponent
이 마법을 부리려면 defineAsyncComponent라는 특수한 주문을 외워야 해요.
- 일반 컴포넌트: “미리 다 지어놔!” (처음부터 무거워요)
- 비동기 컴포넌트: “필요하다고 할 때 그때 가져와!” (처음엔 아주 가벼워요)
3. 실전 마법: 버튼을 눌러야 나타나는 비밀방
평소엔 없다가 버튼을 누를 때만 마법처럼 나타나는 코드를 짜볼까요?
<script setup>
import { defineAsyncComponent, ref } from 'vue';
// 1. 비밀방 마법을 미리 예약해둬요 (비동기 로딩)
const SecretRoom = defineAsyncComponent(() =>
import('./components/SecretRoom.vue')
);
const isShow = ref(false);
</script>
<template>
<div>
<button @click="isShow = true">비밀방 문 열기!</button>
<!-- 버튼을 누르기 전까지는 SecretRoom 코드는 우리 컴퓨터에 없어요! -->
<SecretRoom v-if="isShow" />
</div>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘접이식 자전거’에 비유해 주세요. 탈 때는 펼쳐서 쓰지만, 보관할 때는 작게 접어두는 것처럼 코딩도 효율적으로 관리해야 한다는 걸요. 아이와 함께 만든 ‘에듀패드’에서 용량이 큰 ‘동영상 강의실’이나 ‘복잡한 게임방’은 이 마법을 써서 필요할 때만 불러오도록 설정해 보세요. 앱이 훨씬 가벼워져서 아이도 더 즐겁게 공부할 수 있을 거예요.
마치며: 다이어트에 성공한 마법 성
이제 여러분은 웹사이트의 무게를 자유자재로 조절하는 고수 마법사가 되었습니다! 정말 대단해요. 다음 시간에는 **’마법의 돋보기(Provide & Inject)’**라는 주제로, 아주 깊숙한 곳에 있는 방까지 한 번에 선물을 전달하는 특별한 배달법을 배워볼게요! 내일 아침 9시에 만나요!
