안녕하세요! 가족과 함께하는 스마트 라이프입니다. 우리가 만든 마법 성이 점점 높아져서 이제 1층, 2층을 넘어 10층까지 생겼다고 상상해 보세요. 1층에 계신 증조할아버지가 10층에 있는 증손주에게 사탕을 주려면, 중간에 있는 모든 가족을 거쳐야 할까요? 너무 힘들겠죠? 오늘은 중간 단계를 쏙 빼고 바로 소식을 전하는 비밀 무전기 마법, Provide(프로바이드)와 Inject(인젝트)를 배워볼게요!
1. Provide & Inject: 마법의 실전화기
지금까지 우리는 부모가 자식에게 데이터를 줄 때 Props라는 쪽지를 사용했어요. 하지만 자식의 자식, 그 자식의 자식까지 내려가려면 쪽지를 전달하는 게 너무 번거로워요.
이때 Provide는 높은 층에서 신호를 보내는 ‘방송국’ 역할을 하고, Inject는 아래층 어디에서든 그 신호를 받는 ‘라디오’ 역할을 해요. 중간에 있는 층들은 신경 쓰지 않아도 신호가 벽을 통과해 전달된답니다!
2. 언제 이 마법을 쓰나요?
- 우리 집 테마 설정: 성 전체의 배경색을 ‘낮 모드’에서 ‘밤 모드’로 바꿀 때 유용해요.
- 사용자 이름 공유: 로그인한 마법사의 이름을 성 안의 모든 방에서 알고 싶을 때 사용하죠.
3. 실전 마법: 할아버지의 비밀 메시지 전달하기
중간 단계 블록을 거치지 않고 메시지를 바로 받는 마법 코드를 살펴볼까요?
// [1층 할아버지 성: GrandParent.vue]
setup() {
// 소식을 보낼 준비를 해요 (방송 시작!)
provide('secretMessage', '오늘 저녁은 맛있는 치킨이란다! 🍗');
}
// [중간 층 부모님: Parent.vue]
// 부모님은 이 메시지를 몰라도 되고, 전달할 필요도 없어요!
// [10층 증손주 방: GreatGrandChild.vue]
setup() {
// 라디오를 켜서 할아버지 소식을 들어요
const message = inject('secretMessage');
return { message }; // 화면에 바로 '치킨!'이 나타나요
}
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 이 마법을 ‘가족 단톡방’에 비유해 보세요. 한 명 한 명에게 따로 전화할 필요 없이, 단톡방에 올리면 모두가 동시에 확인하는 것과 같다고요. 복잡한 구조를 단순하게 만드는 것이 코딩의 핵심이라는 것을 가르쳐 주시면 좋습니다. 우리 가족만의 ‘비밀 암호’를 정해서 모든 페이지에 동시에 나타나게 하는 실습을 해보면 정말 즐거워할 거예요.
마치며: 소통의 고수가 된 마법사
이제 여러분은 아주 복잡하고 큰 웹사이트도 막힘없이 데이터를 주고받게 만들 수 있습니다. 드디어 심화 과정의 핵심적인 부분들을 거의 다 마스터하셨네요! 다음 시간에는 **’마법의 속삭임(Custom Events 심화)’**이라는 주제로, 더 정교하게 소통하는 법을 배우며 심화 연재를 마무리해 보겠습니다.
