안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 필요할 때만 방을 짓는 비동기 컴포넌트 마법을 배웠죠? 오늘은 아주 깊숙한 곳에 있는 방에 선물을 보낼 때 쓰는 특별한 배달법을 배워볼 거예요. 1층 할아버지가 3층 손자에게 선물을 줄 때, 2층 아빠를 거치지 않고 바로 전달하는 직송 배달 마법, Provide & Inject(프로바이드 & 인젝트)를 소개합니다!
1. Provide & Inject: 중간 단계 탈출하기
Provide & Inject는 ‘전용 엘리베이터’와 같아요. 보통 Vue.js에서는 부모가 자식에게, 자식이 또 그 자식에게 ‘Props’라는 바구니에 담아 선물을 전달하죠. 하지만 방이 10개나 겹쳐 있다면 중간에 있는 방들은 선물만 전달하느라 너무 힘들 거예요.
이 마법을 쓰면 가장 윗방에서 Provide(제공)라고 외치며 선물을 던지고, 가장 아랫방에서 Inject(주입)라고 외치며 쏙 받을 수 있답니다. 중간에 있는 방들은 신경 쓸 필요가 없어서 아주 편해져요!
2. 마법 주문: 주고 받기
- Provide (공급): 윗방에서 “자, 여기 보물 받아라!” 하고 보물 이름을 붙여서 던지는 주문이에요.
- Inject (주입): 아랫방에서 “그 보물, 내가 쓸게요!” 하고 이름을 불러서 낚아채는 주문이에요.
3. 실전 마법: 우리 집 가훈 전달하기
할아버지 컴포넌트에서 정한 가훈을 증손자 컴포넌트에서 바로 확인하는 코드를 짜볼까요?
<!-- 1. 할아버지 방 (GrandParent.vue) -->
<script setup>
import { provide } from 'vue';
// 'familyMotto'라는 이름으로 선물을 던져요!
provide('familyMotto', '웃으면 복이 와요! 😊');
</script>
<!-- 2. 증손자 방 (GreatGrandChild.vue) -->
<script setup>
import { inject } from 'vue';
// 할아버지가 던진 'familyMotto'를 쏙 받아요!
const motto = inject('familyMotto');
</script>
<template>
<p>우리 집 가훈은? 바로 {{ motto }}!</p>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 ‘무전기’에 비유해 보세요. 옆에 있는 사람에게 말을 전달하는 게 아니라, 같은 채널을 맞춘 사람끼리 멀리서도 바로 대화하는 것과 같다고요. 아이와 함께 만든 ‘에듀패드’에서 ‘아이의 이름’이나 ‘현재 공부 레벨’ 같은 정보는 앱 어디에서나 필요하죠? 이럴 때 Provide & Inject 마법을 쓰면 어떤 방에서든 아이의 정보를 바로 불러와서 칭찬 메시지를 띄워줄 수 있답니다.
마치며: 배달 사고 없는 마법 성
이제 여러분은 복잡하게 얽힌 방들 사이에서도 길을 잃지 않고 데이터를 전달하는 고수 마법사가 되었습니다! 정말 대단해요. 다음 시간에는 **’마법의 변신술(Composables)’**이라는 주제로, 자주 쓰는 마법들을 따로 모아두었다가 언제든 꺼내 쓰는 비법을 배워볼게요! 내일 아침 9시에 만나요!
