안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지금까지 우리는 v-model이라는 마법으로 입력창에 글자를 쓰면 바로바로 데이터 바구니에 담기는 걸 배웠어요. 오늘은 이 마법을 한 단계 더 발전시켜서, 우리 입맛에 딱 맞는 나만의 똑똑한 입력창을 직접 설계하는 법을 알아볼게요!
1. 커스텀 v-model: 마법 양방향 통로
우리가 레고로 ‘특별한 숫자 입력기’나 ‘색깔 선택기’를 만들었다고 상상해 보세요. 그냥 상자일 뿐인 이 블록이 v-model이라는 이름을 달면, 부모 성과 데이터를 주고받는 양방향 비밀 통로가 생깁니다.
내가 입력기에서 숫자를 바꾸면 부모 성의 데이터가 바뀌고, 반대로 부모 성에서 데이터를 바꾸면 내 입력기의 숫자도 자동으로 변하는 아주 편리한 마법이죠!
2. 마법의 약속: modelValue와 update
이 마법 통로를 만들려면 두 가지만 기억하면 돼요.
- modelValue (쪽지 받기): 부모님이 보내준 현재 값을 받는 전용 쪽지함이에요.
- update:modelValue (쪽지 보내기): 값이 바뀌었을 때 부모님께 “값이 이렇게 바뀌었어요!”라고 벨을 울려 알리는 마법이에요.
3. 실전 마법: “숫자 조절기” 블록 만들기
버튼으로 숫자를 올리고 내리는 나만의 입력창 블록을 만들어 볼까요?
// [아이 블록: MyCounter.vue]
app.component('my-counter', {
props: ['modelValue'], // 부모님이 주신 숫자를 받아요
emits: ['update:modelValue'], // 바뀐 숫자를 다시 보내요
template: `
<div class="magic-input">
<button @click="$emit('update:modelValue', modelValue - 1)">-</button>
<span>{{ modelValue }}</span>
<button @click="$emit('update:modelValue', modelValue + 1)">+</button>
</div>
`
});
// [부모 성: App.vue]
<my-counter v-model="myNumber"></my-counter>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들과 함께 ‘나만의 감정 선택기’를 만들어 보세요. ‘기쁨’, ‘슬픔’, ‘화남’ 버튼을 누를 때마다 부모 컴포넌트의 배경색이 변하게 하면, 데이터가 어떻게 막힘없이 흐르는지 시각적으로 이해할 수 있습니다. 이렇게 부품을 직접 만들어 쓰는 습관은 나중에 더 복잡한 로봇이나 앱을 만들 때 아주 튼튼한 기초가 됩니다.
마치며: 조립하고 연결하는 재미
이제 여러분은 이미 만들어진 것만 쓰는 게 아니라, 나만의 규칙을 가진 똑똑한 도구까지 직접 만들 수 있게 되었습니다. 다음 시간에는 **’마법의 창문 뚫기(Slots)’**라는 주제로, 컴포넌트 안에 원하는 내용을 자유롭게 갈아 끼우는 법을 배워볼게요.
