Vue3 새로운 기능 > 시티즌 인사이트

본문 바로가기

시티즌 커뮤니티

시티즌 인사이트

IT&개발 정보 Vue3 새로운 기능

페이지 정보

작성자 GrapeCity 작성일 20-07-21 00:00 조회 1,300회 댓글 0건

본문

Vue 3의 새로운 기능


Vue 3는 2020년 중반에 릴리스될 예정입니다. 출시되면 이전 제품인 Vue 2과 완전히 호환됩니다. 추가된 기능은 개발자의 삶의 질을 높이고 프런트엔드를 새롭고 다양한 방식으로 만들어 낼 수 있는 방식을 안내하기 위해 설계되었습니다.


Vue 3의 새로운 기능

  1. 컴퍼지션 API

  2. 완전한 TypeScript 지원

  3. 포털

  4. 조각

  5. Suspense

  6. 전역 마운팅/구성 API 변경

  7. 다중 v-모델

  8. 사용자 정의 지시문 API


공식 릴리스까지는 vue-next GitHub 리포지토리에서 찾을 수 있는 Vue 3 베타 버전을 사용할 수 있습니다. 새로운 Vue 3 기능 중 일부는 Vue 2에 대한 플러그인으로 사용할 수 있는데, 이에 대해서는 이 주제가 나오면 언급하겠습니다. Vue 3에서는 이러한 기능이 기본 제공되어 개발자가 Vue를 더 즉각적으로 경험할 수 있습니다(Vue를 이용해 작업해본 개발자는 당사가 다루는 작은 문제도 이해할 것입니다).

Vue는 “단지 또 하나의 프레임워크”가 아닙니다. Vue는 응용 프로그램을 위한 “보기”를 만드는 데 도움이 되도록 웹 응용 프로그램용 인터페이스 프레임워크로 설계되었습니다. 모놀리식 프레임워크인 React 및 Angular와 함께 사용하여 UI를 제공함과 동시에, 이면에서는 Angular와 React가 나머지 작업을 하도록 할 수 있습니다.


컴퍼지션 API

컴퍼지션 API는 현재 사용되는 Vue 옵션 API를 대체하는 것입니다. Typescript 지원뿐 아니라 코드 재사용, 유지 관리 편의성, 논리적 관심사에 의한 기능의 합병도 고려하여 설계되었습니다.

이것은 옵션 API와 어떤 차이가 있나요? 단순한 컴포넌트에서 옵션 API를 사용하면 데이터, 메서드, 속성, 컴포넌트, 계산된 값 등이 늘어남에 따라 급속도로 매우 복잡해질 수 있습니다. 각 섹션에 여러 개의 기능 섹션이 포함될 수 있는데, 지금은 코드의 여러 섹션에 퍼져 있습니다.

데이터 그리드 스타일 컴포넌트에서는 이것이 어떻게 보일까요? 아래 예시에서는 옵션과 각 섹션에서 찾을 수 있는 항목의 목록만 표시되어 있습니다. 이 컴포넌트 전체를 작성한다면 코드 양이 매우 많아질 것입니다.

<script>
export default {
data () {
  return {
    //Properties for data
    //Properties for filtering
    //Properties for sorting
    //Properties for paging
  }
},
methods: {      
  //Methods for data
  //Methods for filtering
  //Methods for sorting
  //Methods for paging
},
computed: {
  //Values for data
  //Values for filtering
  //Values for sorting
  //Values for paging
}
}
</script>
​

보시다시피 각 논리 세그먼트의 기능은 옵션 API의 서로 분리된 옵션 사이에 분할되어 있습니다.

컴퍼지션 API 덕분에 유지 관리 편의성과 가독성이 더 높아집니다. 이 예시에서는 숫자를 두 배로 만드는 샘플 스크립트 섹션에서 다음과 같이 작동하는 설정 메서드를 도입합니다.

<script>
import { ref } from "@vue/composition-api"
export default {
  setup () {
    const theNumber = ref(1)
    function doubleTheNumber () {
      theNumber.value = parseInt(theNumber.value) * 2
    }
    return {
      theNumber,
      doubleTheNumber
    }
  }
}
</script>


이는 모든 컴포넌트에서 결국 하나의 대형 설정 메서드로 끝나게 됨을 뜻하나요? 아뇨, 그렇지 않습니다. 설정 메서드를 비효율적으로 사용하지 않도록 다른 곳에서(다른 파일에서) 컴퍼지션 함수를 사용할 수 있습니다. 이렇게 하면 코드 분리 및 재사용의 뚜렷한 이점을 누릴 수 있습니다. 컴퍼지션 함수는 컴포넌트 수와 관계없이 사용할 수 있습니다.

다른 포스팅에서 Vue 3 컴포넌트 API를 시작하는 방법을 설명합니다.


완전한 TypeScript 지원

Vue 3는 완전한 TypeScript 지원이 함께 제공됩니다. Vue 2는 TypeScript를 수용할 수 있었습니다. 즉 Vue 2 응용 프로그램에 억지로 집어넣을 수 있었습니다. 이것이 최상의 배열은 아니었습니다. 많은 경우 서로 기워 붙인 것처럼 보였습니다.

Vue 3는 자동 생성되는 유형 정의가 포함된 TypeScript로 작성되며 TypeScript와 JavaScript 모두에서 동일한 API입니다.


포털

포털은 React에서 나온 개념입니다. 포털은 말 그대로 선언되는 곳이 아닌 곳에서 무언가를 렌더링하는 일을 담당합니다. Vue 3의 경우 포털을 통해 DOM 트리의 다른 곳에서 컴포넌트 또는 컴포넌트의 일부를 렌더링할 수 있습니다.

포털은 모달, 알림, 팝업 등 모든 것에 유용합니다. 여러분은 페이지 본문을 구성하는 주요 요소 이외의 다른 모든 것 위에 이 모든 항목이 표시되길 원합니다. 포털을 사용하면 복잡한 CSS, 의미가 통하지 않는 z-인덱싱 또는 페이지의 다른 임의 위치에 표시되는 요소가 없어도 됩니다.

포털은 타사 플러그인을 통해 Vue 2에서 사용할 수 있습니다. portal-vue가 한 가지 예입니다.

응용 프로그램에서 포털을 사용하려면 ID가 포함된 태그가 필요합니다. 한 가지 예는 HTML 본문이 끝나기 직전에 모달의 ID가 포함된 <div>가 오는 것입니다.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <noscript>
    <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <div id="modal"></div>
  <!-- built files will be auto injected -->
</body>
</html>
​

그다음으로 컴포넌트나 컴포넌트의 일부를 “모달”로 이동하고 싶을 때는 언제나 포털 구문을 사용하십시오.

<template>
<Portal target="#modal">
  <div>I'm rendered in the modal, honest, I will be!</div>
<Portal>
</template>​


조각

React에서 나온 또 하나의 개념은 조각입니다. 어떤 그룹에서는 “다중 루트 노드”라고도 합니다. Vue 2에서는 컴포넌트 하나에 하나의 루트 요소만 허용됩니다. 조각은 이러한 문제를 해결하여 컴포넌트에서 하나 이상의 루트 노드를 사용할 수 있도록 합니다.

작성 시점에 조각이 Vue3에서 어떻게 구현되는지에 관한 예시는 없습니다. 하지만 Vue2에서 유사한 기능을 제공하는 플러그인을 다시 살펴보면 구문이 다음과 같음을 알 수 있습니다.

<Fragment>
<ComponentOne />
<ComponentTwo />
<ComponentThree />
</Fragment>


Vue 3에서 이와 같은 라인이 있는 무언가를 얻는 경우 이는 매우 강력할 수 있습니다. 기존 기능은 개발자가 Vue 2를 멀리하게 만드는 결점 중 하나였습니다. 시스템이 작동하도록 하기 위해 HTML에 계층 구조를 추가할 필요는 없습니다.

위 플러그인 예시는 Vue 커뮤니티 멤버인 Julien Barbay가 빌드한 vue 조각에서 가져온 것입니다. 현재 진행 중인 토론은 Vue 3가 이 플러그인을 코드베이스로 통합할 것임을 시사합니다.


Suspense

Suspense는 조건이 충족될 때까지 컴포넌트 대신에 대체 콘텐츠를 렌더링하는 특별 컴포넌트입니다.

컴포넌트를 작성하고 루트 요소와 콘텐츠 로드(예: API 또는 기타 비동기식 호출) 중에 렌더링할 두 번째 요소의 v-else로 v-if="!isLoading"을 자동 추가했던 때를 모두 기억할 것입니다.

Suspense는 바로 이때 사용하기 위한 것입니다. 아래 템플릿에서는 예시 구문이 나와 있으며, v-if 버전보다 훨씬 더 낫습니다.

<Suspense>
<template #default>
  <MyData />
</template>
<template #fallback>
  <div>Loading...</div>
</template>
</Suspense>


Suspense는 컴포넌트가 로드되어야 함을 어떻게 감지할까요(이미 로드된 것을 감지하는 것이 아님)? 이것은 앞서 설명한 컴퍼지션 API 및 설정 메서드와 함께 제공됩니다. 설정 메서드를 비동기화하면 Suspense가 인계를 받고, 설정에서 복귀하면 대체 콘텐츠가 표시됩니다.

getMyData에 대한 호출을 완료할 때까지 아래 코드 조각 같은 것이 대체 콘텐츠를 트리거합니다.

export default {
async setup () {
  const data = await getMyData()
  return { data }    
}
}


이 기능은 외부 호출에 필요한 상용구 코드를 획기적으로, 우아하게 줄여 줍니다.


전역 마운팅/구성 API 변경

Vue 앱 마운팅에 약간의 변화가 있을 예정인데, 할 수 있는 작업의 가능성을 높이는 방식으로 약간 달라질 것입니다. 즉 단일 전역 인스턴스에서 인스턴스를 선언하고 마운팅하는 쪽으로 이동합니다.

다음은 vuejs 리포지토리의 RFC에서 가져온 현재 및 신규 구문 코드 조각입니다.

현재:

import Vue from 'vue'
import App from './App.vue'
​
Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)
​
new Vue({
render: h => h(App)
}).$mount('#app')


신규:

import { createApp } from 'vue'
import App from './App.vue'
​
const app = createApp(App)
​
app.config.ignoredElements = [/^app-/]
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)
​
app.mount('#app')


이로 인해 여러 앱의 가능성이 도입될까요? 아마 그럴 것입니다. 하지만 분명한 것은 단일 인스턴스는 없으며 새로운 접근 방식으로 더 많은 것을 할 수 있다는 것입니다.


다중 v-Model 

Vue에 익숙하다면 v-model이 무엇인지 잘 알 것입니다. 이것은 컴포넌트에서 양방향 바인딩을 달성하기 위한 지시문입니다. 이것을 이용해 반응적 속성을 전달하고 내부에서 수정합니다. v-model이 값 전달과 입력 이벤트 수신 대기의 바로 가기라는 것을 모르실 수 있습니다.

그렇다면 “다중 v-model”이란 무슨 뜻일까요? 여러분은 컴포넌트의 여러 속성을 바인딩하고 수신 대기하려 한 경우가 있었을 것입니다. 예를 들어 이름과 성, 두 값이 포함된 이름 컴포넌트를 만들 수 있습니다. 여러분은 이 값 각각에 대한 다중 v-model을 원하는데, 다중 v-model이 효과를 나타내는 것은 바로 이때입니다.

<NameComponent
  v-model:fornames="forname"
  v-model:surname="surname"
/>


이 새로운 구문은 쉬워 보이는데, 맞나요? 그렇습니다. 이제 여러분은 v-model에 이름을 지정할 수 있습니다.


사용자 정의 지시문 API

Vue를 사용할 때 지시문이 무엇인지 알아야 합니다. 주요 기본 제공 지시문 중 하나는 v-model에 관해 설명할 때 보여드렸습니다. v-show와 같은 것을 비롯해 다른 지시문도 있습니다.

Vue 2에서 사용자 정의 지시문을 작성할 수 있습니다. 그러나 Vue 3에서는 지시문이 달라집니다. 왜 그럴까요? 현재 양식에서 지시문 API는 보통 Vue 생명 주기와 일치하지 않는 자체 생명 주기 메서드 집합을 보유하고 있습니다. Bind, inserted, update, componentUpdated, unbind.

Vue 3에서 이 메서드는 표준 Vue 생명 주기와 동기화되므로 이제 여러분은 beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted를 얻게 됩니다. 응용 프로그램을 빌드할 때 훨씬 더 기억하기 쉽습니다. 이제 필요한 메서드가 무엇인지 알아내느라 헤매고 두 가지 다른 생명 주기를 기억하느라 애쓰지 않아도 됩니다.


Vue 프레임워크의 미래

이 글을 작성하는 시점에도 여전히 Vue 3 릴리스를 기다리며 보류 상태에 머물러 있습니다. vue-next GitHub 레포지토리에서 “베타” 버전을 직접 사용해 볼 수 있습니다. 더 훌륭하고 빠른 시스템을 개발하는 데 도움이 되는 다수의 기능이 Vue에 도입되었습니다. 삶의 질을 개선할 뿐 아니라 탁월한 실력을 발휘하고 직업 생활을 즐기는 데 도움이 되는 응용 프로그램을 만들 수 있는 더 많은 방법이 있습니다.

기억할 것은 Vue 3가 이전 버전과 호환된다는 것입니다(약간의 코드 변경 필요). 즉 기존의 작업 방식을 폐기하는 대신, 새로운 방식을 추가합니다.

이미 Vue 3를 사용하고 있다면 Vue 버전으로 제공되는 UI 컴포넌트 라이브러리인 Wijmo를 사용해 보는 건 어떻습니까?


  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.