Vue 3 입문기

들어가며

Vue의 메인 버전이 3가 된지 꽤 됐다. 주로 Nuxt 환경에서 작업해왔기 때문에,
작성 당시에는 Nuxt 3가 RC 단계였고 실서비스에 바로 적용하기에는 조심스러웠다.
그래서 궁금하고 심심하던 참에 간단한 Todo App을 만들어봤다.

Custom Component event 관리하기

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

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

이벤트를 정의하고

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

State 관리하기

Composition API에서는 ref와 reactive를 사용해 상태를 반응형으로 만들 수 있다.
(어디서 많이 본 ...)

ref는 { value: '값이 들어가는 곳' } 형태의 객체를 반환한다.
그리고 template 단에서 사용될 땐 .value를 직접 쓰지 않아도 값이 알아서 풀려서 바인딩 된다.

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

또 다른 방법으로는 reactive가 있다.
객체 자체를 반응형 proxy로 감싸기 때문에 Vue 2의 data 옵션과 비슷한 감각으로 사용할 수 있었다.

Ref와 Reactive의 차이점

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

reactive는 객체나 배열을 proxy로 감싸기 때문에 Array.prototype.push나 Array.prototype.pop 등의 method를 호출했을 때도 반응형으로 동작했다.
또한 nested property도 반응형으로 추적된다.

ref는 primitive 값에도 사용할 수 있고, 값을 읽거나 바꿀 때 .value를 통해 접근한다는 점이 다르다.
다만 객체나 배열을 ref에 넣어도 내부 값은 깊게 반응형으로 변환된다.
즉, ref에 배열을 넣었다고 해서 push, pop 같은 배열 method가 반응형으로 동작하지 않는 것은 아니었다.

어떤 것을 사용할까 ?

정답은 없는 것 같다.
다만, 개인적으로는 primitive 값이나 교체가 잦은 상태에는 ref, 여러 property를 가진 객체 상태에는 reactive가 더 자연스럽게 느껴졌다.