커스텀 v-model과 다중 바인딩 심화
커스텀 v-model과 다중 바인딩 심화
Vue 3에서 가장 큰 변화 중 하나는 컴포넌트에 여러 개의 v-model을 동시에 사용할 수 있게 되었다는 점입니다. 이 강의에서는 modelValue와 update:modelValue를 활용하여 양방향 데이터 바인딩 컴포넌트를 설계하는 방법을 배웁니다.
왜 커스텀 v-model이 필요할까요?
기본적인 <input> 태그에는 v-model을 쉽게 사용할 수 있지만, 우리가 직접 만든 커스텀 입력 컴포넌트(예: 커스텀 드롭다운, 태그 입력기, 복합 폼)에서도 v-model을 사용하고 싶을 때가 있습니다. Vue 3에서는 이 과정이 매우 직관적이고 강력해졌습니다.
| 버전 | 동작 방식 | 한계 및 특징 |
|---|---|---|
| Vue 2 | value prop + input emit | 하나의 컴포넌트당 1개의 v-model만 허용됨. (.sync 수식어 혼용) |
| Vue 3 | modelValue prop + update:modelValue emit | 다중 v-model 바인딩 가능 (예: v-model:title, v-model:content) |
💡 핵심 규칙: 자식 컴포넌트의 역할
자식 컴포넌트는 부모로부터 받은 Props 데이터를 절대 직접 수정해서는 안 됩니다. 대신, 값이 변경되어야 할 때 emit('update:프롭이름', 새로운값)을 호출하여 부모에게 값을 변경해달라고 요청(이벤트)해야 합니다. 부모는 이 이벤트를 받아 자신의 상태를 업데이트하고, 변경된 값이 다시 자식에게 내려오면서 양방향 바인딩이 완성됩니다.
왜 커스텀 v-model이 필요할까요?
기본적인 <input> 태그에는 v-model을 쉽게 사용할 수 있지만, 우리가 직접 만든 커스텀 입력 컴포넌트(예: 커스텀 드롭다운, 태그 입력기, 복합 폼)에서도 v-model을 사용하고 싶을 때가 있습니다. Vue 3에서는 이 과정이 매우 직관적이고 강력해졌습니다.
| 버전 | 동작 방식 | 한계 및 특징 |
|---|---|---|
| Vue 2 | value prop + input emit | 하나의 컴포넌트당 1개의 v-model만 허용됨. (.sync 수식어 혼용) |
| Vue 3 | modelValue prop + update:modelValue emit | 다중 v-model 바인딩 가능 (예: v-model:title, v-model:content) |
💡 핵심 규칙: 자식 컴포넌트의 역할
자식 컴포넌트는 부모로부터 받은 Props 데이터를 절대 직접 수정해서는 안 됩니다. 대신, 값이 변경되어야 할 때 emit('update:프롭이름', 새로운값)을 호출하여 부모에게 값을 변경해달라고 요청(이벤트)해야 합니다. 부모는 이 이벤트를 받아 자신의 상태를 업데이트하고, 변경된 값이 다시 자식에게 내려오면서 양방향 바인딩이 완성됩니다.