[VueJS] Vue2 업데이트 시작 Vue2.7 Naruto 공식 릴리즈

오늘은 멈춰있던 Vue2를 다시 움직이게 할 Vue 2.7 공식 릴리즈 Naruto에 대해서 알아보겠습니다. 기존의 Vue 2.6에서의 변경점과 Vue3와의 차이점에 대해서 알아 보겠습니다.

Vue3로 넘어가기 위해서 파격적으로 공식적으로 Vue3를 지원하기도 하고 많은 변화들이 있었는데 Vue2에서도 Vue3의 기능을 사용할 수 있게 2.7 릴리즈가 된다고 알고 있었는데 드디어 되었습니다. 사내에선 Vue2 기반으로 프로젝트가 진행되었었는데 Vue3로 마이그레이션을 진행해야될지 고민하던 찰나에 2022 7월에 Naruto가 나와서 일단은 Vue2에서 최신버전으로 올리겠습니다. 올리면서 알게된 변경점들에 대해서 말씀드리겠습니다.

 

바뀐점(2.7 release)

어차피 vue3를 사용하신분이라면 다들 아실 내용이지만 vue2에 익숙한 분들을 위해 설명과 함께 정리해 드리겠습니다.

 

1. Composition API

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

vue공식문서의 코드를 인용하겠습니다. 다들 아시겠지만 컴포지션 API는 로직을 유연하게 구성하게 도와주는 함수기반의 API입니다. 컴포지션 API를 활용한다면 기존의 옵셔널에 비하여 컴포넌트의 가독성도 올라간다고 생각합니다. 컴포지션 API가 들어오면서 개인적으로 vue를 개발하는 경험과 react를 개발하는 경험이 매우 흡사해졌다고 생각합니다.( 제 개인적인 체감입니다. )

 

2. SFC <script setup>

<script setup>
  console.log(`The initial count is ${count.value}.`)
</script>

우선 script setup은 싱글 파일 컴포넌트내에서 컴포지션 APi를 사용하기 위한 문법입니다. 싱글 파일 컴포넌트는 한 파일이 하나의 요소를 정의하는 방식의 컴포넌트를 말합니다. 장점으로는 간결한 코드 작성과 타입추론이 좋아지는 장점이 있습니다.

 

2-1. 최상위 바인딩 사용 편이증가

<script setup>
  import { code } from './common'
  cosnt name = '류호진'
</script>

<template>
  <span>{{name}}</span>
  <span>{{code}}</span>
</template>

솔직히 vue2 옵셔널에 비해서 매우 매우 매우 매우 편합니다. react에 익숙하신 분이라면 더욱 더 그렇게 느끼실 것이라고 생각합니다.

 

2-2. Ref

<script setup>
  import { ref } from 'vue';
  cosnt name = ref('');

  onMounted(() => {
    name.value = '류호진'
  })
</script>

<template>
  <span class='name'>{{name}}</span>
</template>

템플릿 안에서 ref()의 변숨명을 그대로 사용하면 자동적으로 ref안 value값을 가져와서 바인딩하게 됩니다.

 

2-3.커스텀 컴포넌트

<script setup>
  import { ref } from 'vue';
  const name = ref(null);
  name.style.background = '#000';
</script>

<template>
  <div class="name" ref="name"/>
</template>

DOM접근을 위해 html에도 접근할 수 있습니다. html 속성에 ref='이름' 지정해주고 script에서 지정한 이름과 동일한 변후명으로 ref()를 선언하면 바로 사용 가능합니다.

 

2-3. defineProps()

<script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps({
    name : string,
  })
  
  console.log(props.name);
</script>

<template>
  <span class='name'>{{name}}</span>
</template>

위와 같이 상위 컴포넌트에서 하위컴포넌트로 props를 통해 데이터를 전달할 떄에는 defineProps를 이용하여 전달할 수 있습니다.

 

3. SFC css v-bind

<script setup>
  const theme = {
    color: 'pink'
  }
</script>

<tepmlate>
  <p>안녕</p>
</template>

<style scoped>
p {
  color : v-bind('theme.color')
}
</style>

싱글 파일 컴포넌트에서 css의 값을 동적으로 바꾸고 싶을때는 v-bind를 사용하실 수 있습니다. 옵셔널에서도 가능합니다. 예시는 컴포지션으로 보여드리겠습니다. script내에서 정의한 데이터를 css에서 v-bind를 이용하여 할당받아 사용할 수 있습니다. 좀 더 동적인 화면 변화를 보여주고 싶을때 사용하면 정말 유용합니다.

 

이외에 지원하는 것들

defineComponents() , h(), useSlot(), useAttrs(), useCssModules(), set(), del(), nextTick()등 다양한 꿀 같은 기능들을 사용할 수 있습니다. 모두 설명드리고 싶지만 글의 요지상 다른 글에서 설명 드리도록 하겠습니다.

 

Vue3와 다르게 동작하는 점

1. vue2의 변경 감지는 기존과 동일하게 동작합니다.

2. vue2에서는 reactive(), ref(), shallowReactive()는 프록시를 생성하는 대신 원본 오브젝트를 직접적으로 사용합니다. 그렇기 때문에 아래와 같은 결과를 보여줍니다.

reactive(foo) === foo
// 2.7에서는 true 3이상 에서는 false

3. readonly()는 객체 생성은 하지만 추가된 속성을 추적하지 않기 때문에 배열에는 사용하지 않아야 합니다.

 

이외에도 추가적으로 비동기 컴포넌트를 이용할 수 없으며 createApp()등 vue3에서 제공하는 다양한 기능들이 누락되어 있습니다. 이런점들을 참고하여 작업하시면 됩니다.

 

vue 2.7 Naruto Release 에 대한 생각

2.7 로 굳이 업데이트까지 해주는 이유는 알 것 같습니다. 기존의 써드파티들이 vue2만 지원하는 것이 아직 많이 없기 때문이기도 하고 vue3의 커뮤니티가 그렇게 많이 발전되있지 않기 때문이라고 생각합니다. 하지만, 주도적으로 업데이트 되고 있는것은 Vue3이고 이건 변함없는 사실이기 때문에 특별한 사유가 없다면 vue 2.7보다는 vue3로 넘어가는게 좋다고 생각합니다. 정안되면 vue로 랩핑 된거 안쓰면 됩니다. 직접 랩핑하셔도 되고.. 솔직히 이번에 업데이트 하면서 이런생각이 많이 들었습니다. 이럴거면 vue3가 나은것이 아닌가?.. 라는 생각이 듭니다. 필요도 했었고 굳이 vue2 업데이트를 다시 시작해준 것에 대하여 감사하게 생각합니다.

 

추신. 버그 fix가 계속되서 2.7.10까지 나왔습니다.