안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 우리는 나만의 레고 블록인 ‘컴포넌트’를 만드는 법을 배웠어요. 그런데 이 블록들이 서로 대화를 할 수 없다면 어떨까요? 마치 소리는 안 들리고 화면만 나오는 TV처럼 답답하겠죠? 오늘은 블록들끼리 소식을 전하는 마법 전화기인 Props(프롭스)와 Emit(에밋)을 배워볼게요!
1. Props: 부모가 자식에게 주는 ‘마법 쪽지’
먼저 Props는 엄마 블록(부모)이 아이 블록(자식)에게 전달하는 ‘마법 쪽지’와 같아요. 예를 들어, 엄마가 “오늘 점심은 피자야!”라고 쪽지를 써서 아이에게 주면, 아이 블록은 그 내용을 읽고 화면에 “피자”라고 보여주는 식이죠.
이 쪽지는 한쪽 방향으로만 흘러가요. 아이는 엄마가 준 쪽지 내용을 마음대로 고칠 수 없고, 오직 읽고 보여주는 것만 가능하답니다.
2. Emit: 자식이 부모에게 보내는 ‘알림 벨’
그럼 아이 블록이 엄마 블록에게 “엄마, 저 배고파요!”라고 말하고 싶을 땐 어떻게 할까요? 이때 사용하는 것이 바로 Emit입니다. 이는 아이 블록이 ‘벨’을 울리는 것과 같아요.
아이가 벨을 띵동~ 하고 울리면(Emit), 엄마 블록은 그 소리를 듣고 미리 준비해둔 마법(함수)을 실행하게 됩니다.
3. 실전 마법: “엄마, 간식 주세요!” 버튼 만들기
엄마가 정해준 간식 이름을 보여주고, 아이가 버튼을 누르면 엄마가 대답하는 코드를 짜볼까요?
<div id="app">
<!-- 부모 컴포넌트 -->
<h1>엄마의 주방</h1>
<p>알림: {{ message }}</p>
<!-- Props로 '간식' 쪽지를 전달하고, 'bell' 소리를 기다려요 -->
<child-component
snack="달콤한 초코쿠키"
@bell="replyFromMom">
</child-component>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return { message: '기다리는 중...' }
},
methods: {
replyFromMom() {
this.message = '알았어! 맛있는 간식 줄게~';
}
}
});
// 아이 컴포넌트 정의
app.component('child-component', {
props: ['snack'], // 쪽지(Props) 받기
template: `
<div style="border: 2px dashed #ff9900; padding: 10px;">
<p>아이 블록이 받은 쪽지: {{ snack }}</p>
<button @click="$emit('bell')">엄마 부르기 (Emit)</button>
</div>
`
});
app.mount('#app');
</script>
4. 스마트한 가족 대화법 응용
이 기술은 실제 스마트홈 기기에서도 쓰여요. 스마트폰 앱(부모)에서 거실 조명(자식)에게 ‘밝기 50%’라는 쪽지(Props)를 보내면 조명이 어두워지고, 조명에 문제가 생기면 앱에게 ‘고장 났어요!’라는 알림(Emit)을 보내는 원리죠.
마치며: 서로 대화하는 웹사이트의 완성
이제 여러분은 블록들을 만들고, 그 블록들이 서로 대화하게 만드는 방법까지 알게 되었습니다. 이제 진정한 ‘마법 설계사’가 된 거예요! 다음 시간에는 지금까지 배운 모든 마법을 합쳐서 실제로 쓸모 있는 **’나만의 스마트 할 일 목록(To-Do List)’**을 만들어 보겠습니다!
