안녕하세요! 가족과 함께하는 스마트 라이프입니다. 어제는 대기실을 만들어 기다림을 즐겁게 만드는 서스펜스(Suspense) 마법을 배웠죠? 오늘은 우리 마법 성이 아주 복잡해졌을 때 꼭 필요한 기술을 배울 거예요. 1층 할아버지가 4층 손자에게 선물을 줄 때, 중간에 있는 아빠와 삼촌을 귀찮게 하지 않고 바로 전달하는 직송 배달 마법, Provide & Inject(프로바이드 & 인젝트)를 소개합니다!
[IMAGE_1]
1. Provide & Inject: 전용 엘리베이터 타기
보통 Vue.js에서는 부모님이 자식에게 선물을 줄 때 ‘Props’라는 바구니에 담아 전달해요. 하지만 방이 너무 많아서 증손자, 고조손자까지 내려가야 한다면 중간에 있는 사람들은 선물만 전달하다가 하루가 다 갈 거예요.
Provide & Inject는 성 안의 ‘비밀 전용 엘리베이터’와 같아요.
- Provide (공급): 윗방에서 “누구든 필요한 사람 이 보물 가져가라!” 하고 엘리베이터에 실어 보내는 주문이에요.
- Inject (주입): 아주 먼 아랫방에서 “그 보물, 제가 받을게요!” 하고 버튼을 눌러 쏙 빼내는 주문이랍니다.
2. 왜 이 마법이 필요한가요?
- 중간 방들이 편해져요: 선물을 전달할 필요가 없는 중간 방들은 자기 할 일에만 집중할 수 있어요.
- 코드가 깔끔해져요: 바구니를 여러 번 옮길 필요가 없어서 주문서(코드)가 아주 짧아진답니다.
3. 실전 마법: 우리 집 가훈 전달하기
최고 어른 방에서 정한 ‘오늘의 목표’를 가장 깊숙한 방에서 바로 확인하는 코드를 짜볼까요?
<!-- 1. 할아버지 방 (App.vue) -->
<script setup>
import { provide } from 'vue';
// 'todayGoal'이라는 이름으로 선물을 던져요!
provide('todayGoal', '수학 문제 5개 풀기! ✏️');
</script>
<!-- 2. 아주 깊은 손자 방 (DeepChild.vue) -->
<script setup>
import { inject } from 'vue';
// 위에서 던진 'todayGoal'을 낚아채요!
const myGoal = inject('todayGoal');
</script>
<template>
<div class="goal-box">
<p>🌟 오늘의 미션: {{ myGoal }}</p>
</div>
</template>[IMAGE_2]
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘무전기’에 비유해 보세요. 옆 사람에게 귓속말을 전하는 게 아니라, 같은 채널을 맞춘 사람끼리는 멀리 있어도 바로 대화할 수 있는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 ‘아이의 닉네임’이나 ‘현재 테마 색상’ 같은 정보는 모든 방에서 필요하죠? 이럴 때 이 직송 배달 마법을 쓰면 어떤 방을 새로 만들더라도 아이의 정보를 즉시 불러와서 환영해줄 수 있습니다.
마치며: 복잡함을 이겨내는 똑똑한 마법사
이제 여러분은 성이 아무리 커지고 방이 많아져도 길을 잃지 않고 데이터를 전달하는 고수 마법사가 되었습니다! 정말 대단해요. 다음 시간에는 **’마법의 복제술(Slots)’**이라는 주제로, 방의 모양은 그대로 두면서 안에 들어갈 가구들만 내 맘대로 쏙쏙 바꿔 끼우는 신기한 비법을 배워볼게요! 내일 아침 9시에 만나요!
