defineProps, defineEmit, defineModel 차이

Question

부모와 자식 컴포넌트간의 데이터 교환에 있어 부모 -> 자식 : props 자식 -> 부모 : emit 이라는건 어느정도 개념이 잡힌 것 같습니다.   근데, 좀 더 찾아보니 부모자식 컴포넌트 사이에도 model을 지정해서 양방향 바인딩이 가능하다는 예제를 본 것 같습니다.   model을 사용하여 props & emit을 대체한다면 복잡한 코드가 좀 더 나아질것 같은데 defineModel을 사용하지 않는 이유가 따로 있는것일까요?

captain · Answer

안녕하세요, 말씀하신 건 v-model의 양방향 바인딩 기능을 얘기하시는 것 같네요. Vue 3에서 표현이 defineModel 이지만 실제로는 아래 내용입니다. https://joshua1988.github.io/web-development/vuejs/v-model-usage/ 요건 첫 강의부터 아시기에는 다소 복잡한 개념이라고 생각해서 이후 강의들에 컴포넌트 디자인 패턴이라는 주제로 설명하고 있습니다 :)

communityai8509 · Answer

안녕하세요, 인프런 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입니다.