안녕하세요! 가족과 함께하는 스마트 라이프입니다. 드디어 Vue.js 심화 마법 학교의 마지막 시간입니다! 지난 시간에는 증조할아버지와 비밀 무전기를 썼다면, 오늘은 자식이 부모에게 “이건 이렇게 처리해 주세요!”라고 아주 상세하게 부탁하는 마법 전령, Custom Events(커스텀 이벤트)의 고수 기술을 배워볼게요.
1. Custom Events: 내 마음을 담은 전령
자식 컴포넌트가 부모에게 소식을 전할 때 쓰는 $emit 마법, 기억하시나요? 심화 마법사는 단순히 “눌렀어요!”라고만 하지 않아요. “두 번 눌렀고, 지금 기분은 최고예요!”처럼 아주 자세한 정보를 담은 마법 전령(Payload)을 함께 보낼 수 있답니다.
부모님은 이 전령이 가져온 소식을 듣고 성의 배경색을 바꾸거나, 점수를 올리는 등 아주 복잡한 일들을 척척 해낼 수 있게 되죠.
2. 마법 전령 활용법: 값 전달하기
- Emit: 전령을 날려 보내는 주문이에요.
- Payload: 전령이 발목에 묶어 가져가는 ‘비밀 편지’ 내용이에요. 숫자, 글자, 심지어 보물 지도(객체)도 보낼 수 있어요!
3. 실전 마법: “얼마나 좋은지” 알려주는 버튼
버튼을 누를 때마다 점수를 얼마나 올릴지 전령에게 맡겨 볼까요?
// [자식 블록: MagicButton.vue]
setup(props, { emit }) {
const sendMagic = () => {
// 'finish'라는 이름의 전령에게 '100점'이라는 편지를 들려 보내요
emit('finish', 100);
};
return { sendMagic };
}
// [부모 성: App.vue]
<magic-button @finish="(point) => score += point"></magic-button>
// 전령이 가져온 '100(point)'을 받아서 내 점수에 더해요!
4. 심화 시리즈를 마치며: 이제 여러분은 마법 거장!
심화 1강부터 11강까지 우리는 애니메이션, 상태 관리, 돋보기 사용법, 그리고 복잡한 소통 방식까지 모두 배웠습니다. 이제 여러분은 단순히 레고를 조립하는 수준을 넘어, 레고들이 서로 대화하고 스스로 움직이는 진짜 마법 성을 설계할 수 있게 되었어요.
아이들과 함께 이 모든 기술을 하나씩 섞어 보세요. 처음엔 삐걱거려도 괜찮아요. 마법 돋보기를 들고 범인을 찾다 보면 어느새 전 세계 사람들이 깜짝 놀랄 멋진 앱을 완성하게 될 거예요!
마치며: 새로운 모험의 시작
Vue.js 마법 학교의 문은 잠시 닫히지만, 여러분의 코딩 모험은 이제부터 진짜 시작입니다. 다음 시간에는 지금까지 배운 모든 마법을 총동원해서 **’우리 가족만의 스마트 패드 메인 화면’**을 직접 만들어보는 실전 프로젝트 시간을 가져볼게요. 내일 아침 9시, 완결 축하 파티와 함께 만나요!
