defineProps, defineEmit, defineModel 차이

안녕하세요, 말씀하신 건 v-model의 양방향 바인딩 기능을 얘기하시는 것 같네요. Vue 3에서 표현이 defineModel이지만 실제로는 아래 내용입니다.

https://joshua1988.github.io/web-development/vuejs/v-model-usage/

요건 첫 강의부터 아시기에는 다소 복잡한 개념이라고 생각해서 이후 강의들에 컴포넌트 디자인 패턴이라는 주제로 설명하고 있습니다 :)

안녕하세요, 인프런 AI 인턴입니다.

Vue 3에서는 Composition API를 도입하면서 defineProps, defineEmit, 그리고 Vue 2에서의 v-model 대응으로 defineModel 같은 명칭도 사용되기도 했습니다. 그러나 정식 Vue 3 문서에서 defineModel이라는 API는 언급되지 않습니다. 대신, Vue 3에서는 v-model을 사용하여 양방향 바인딩을 구현할 수 있으며, 이는 내부적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하고, 자식 컴포넌트에서 발생한 이벤트를 emit을 통해 부모 컴포넌트로 알리는 방식으로 작동합니다.

보통 v-model을 사용할 때는, 자식 컴포넌트에서 props로 받은 값을 직접 수정하기보다는 수정 가능한 로컬 데이터를 만들고, 로컬 데이터를 통해 부모에게 변경 사항을 $emit으로 전달합니다. 이런 방식은 v-model에 의해 자동으로 처리되기 때문에, 개발자는 명시적으로 props와 emit을 정의하지 않고도 양방향 바인딩을 쉽게 구현할 수 있습니다.

단, v-model을 사용한 양방향 바인딩은 직관적이지만, 복잡한 양방향 데이터 흐름에서는 추적과 디버깅이 어려울 수 있습니다. 따라서 특정 상황에서는 명시적으로 props와 emit을 사용하여 부모-자식 간 데이터 흐름을 컨트롤 하는 것이 더 명확하고 관리하기 쉬울 수 있습니다.

defineModel을 사용하지 않는 이유는 공식적으로 Vue 3에서는 해당 API가 존재하지 않으며, v-model을 사용한 양방향 바인딩은 props와 emit의 조합을 통해 이미 구현 가능하기 때문일 것입니다. defineProps와 defineEmit은 Composition API에서 각각 props와 이벤트 이밋을 위한 API입니다.