들어가며

Vue의 메인 버전이 3가 된지 꽤 됐다. 주로 Nuxt 환경에서 작업해왔기 때문에,
그리고 아직 Vue 3를 채용한 Nuxt 3가 RC 단계이기 때문에 Product에 적용하기에는 어려움이 있었다.
그래서 궁금하고 심심하던 참에 간단한 Todo App을 만들어봤다.

Custom Component event 관리하기

예전에는 단순히 $emit API로 이벤트를 발생시켜왔다보니
어느 이벤트가 발생할지 예측하기 어려워서 다소 관리하거나 명세하기 쉽지 않았다.

하지만 Vue 3에서 주로 다루는 Composition API에서는 이벤트들을 defineEmits를 통해 정의하여 관리할 수 있다.
defineEmits을 실행하면 주어지는 반환값으로 그대로 이벤트를 발생시킨다.

이벤트를 정의하고

그대로 반환되는 emit function으로 emit한다.

State 관리하기

Ref가 추가되었다.
(어디서 많이 본 ...)

대부분 Ref를 추천하는 것 같다.
구조를 살펴보면 { value: '값이 들어가는 곳' }로 이루어져 있다.
그리고 template 단에서 사용될 땐 Ref의 value 값으로 알아서 바인딩 된다.

그리고 순수 Javascript 객체일 줄 알았는데,
Ref에는 reactivity를 위한 요소들도 함께 들어가 있었다. 그래서인지 ref.value가 수정되면 re-rendering이 발생했었다.

또 다른 방법으로는 Reactive가 있다.
Vue 2에서 제공하는 Vue.Observable과 같은 역할을 한다.

Ref와 Reactive의 차이점

간단한 Toy project를 진행하면서 느낀 가장 큰 차이점은

Reactive는 Vue 2 data처럼 Array.prototype.push나 Array.prototype.pop 등의 method들을 호출했을 때, reactivity하게 작동했다.
또한 각 property들에 대해서도 deep watch를 하는 것 같았다.

그와 다르게 Ref는 나름 불변성 원칙이 존재하는 것 같았다.
Array method들에 대한 effect도 따로 없다.
정말로 Ref의 경우 value값이 변경됐을 때, reactivity를 제외하면 아무것도 없었다.

어떤 것을 사용할까 ?

정답은 없는 것 같다.
다만, 개인적으로는 불변성 원칙을 선호하고, 명확하게 데이터를 관리하는 편을 좋아하기 때문에 Ref가 좀 더 끌리는 것 같다.