! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

Vue3 컴퍼지션 API - 시작하기 > 인사이트

본문 바로가기

MESCIUS 커뮤니티

인사이트

IT&개발 정보 Vue3 컴퍼지션 API - 시작하기

페이지 정보

작성자 GrapeCity 작성일 2020-06-10 00:00 조회 5,776회 댓글 0건

본문



Vue 3는 2020년 2/4분기에 릴리스될 예정이며, 새로운 기능이 다수 제공됩니다. Vue 3 릴리스에서 가장 큰 특징 중 하나는 Vue의 새로운 컴퍼지션 API입니다. 개발자가 Vue로 더 큰 규모의 프로젝트를 빌드하기 시작하면서 코드 구성, 가독성, 재사용 가능성과 관련된 몇 가지 기본 과제가 더 명백하게 대두되었습니다.

React Hooks의 영감을 받은 컴퍼지션 API의 목표는 컴포넌트를 간소화하여 가독성과 구성을 개선하고 응용 프로그램 전체에 걸쳐 코드를 더 쉽게 재사용할 수 있도록 하는 것입니다.

컴퍼지션 API는 개발자가 이 API를 컴포넌트 옵션보다 우선적으로 사용할 수 있게 허용할 뿐 아니라 Vue의 다른 코드 재사용 가능성 메서드보다 우선적으로 사용할 수 있는 컴퍼지션 함수에 추가할 수도 있습니다(예: mixin 및 범위 지정된 슬롯). 이 문서에서는 Vue 2에 있었던 재사용 가능성, 가독성 및 구성 측면의 결함을 개관하고, 컴퍼지션 API가 이러한 문제를 해결하는 방식을 중점적으로 살펴봅니다.

Wijmo의 Vue3 계획: Wijmo 팀은 Wijmo의 컨트롤이 출시될 때 Vue 3에 사용할 수 있도록 최선을 다하고 있습니다. Wijmo는 Vue 개발자가 손쉽게 응용 프로그램을 빌드할 수 있도록 지원하기 위해 FlexGrid와 같은 강력한 컴포넌트를 제공하는 데 전념하고 있습니다.


컴퍼지션 API 설치

컴퍼지션 API는 Vue 3의 일부이지만 Vue 2에도 사용할 수 있었습니다. 다음 명령을 실행하여 컴퍼지션 API를 프로젝트에 추가할 수 있습니다.

npm install @vue/composition-api --save 


그런 다음, 다음과 같이 이 파일을 main.js 파일 안으로 가져옵니다.

import VueCompositionAPI from “@vue/compostion-api”; 

Vue.use(VueCompositionAPI);


이제 프로젝트에서 Vue 3의 컴퍼지션 API를 활용할 수 있게 됩니다.


코드 구성 및 가독성

Vue 2에서는 컴포넌트의 기능을 컴포넌트 옵션을 사용해 구성했습니다. 이 옵션에는 데이터, 메서드 등이 포함되어 있습니다. 모두 6가지 컴포넌트 옵션이 있으므로 컴포넌트의 로직을 컴포넌트의 최대 6개 섹션에 두루 분할할 수 있습니다.

컴포넌트가 늘어남에 따라 이와 같은 컴포넌트 내 코드 분할로 인해 코드 구성이 더 힘들어질 뿐 아니라 코드를 읽어 나가는 다른 개발자들이 컴포넌트 내 로직의 흐름을 이해하기가 더 어려워집니다.

Vue 3의 컴퍼지션 API는 컴포넌트 옵션을 제거하고 이를 setup() 함수로 교체합니다. setup() 함수는 개발자에게 자신의 코드베이스를 구성하는 방식을 제어할 수 있는 권한을 더 많이 부여함으로써 코드베이스가 컴포넌트 옵션에 따라 제한을 받는 대신에 로직 및 기능에 따라 구성될 수 있도록 합니다.

<template> 
<div> 
    <h1>Counter</h1> 
      <p>Count: </p> 
      <button @click="countIncrement()">Increase Count</button> 
      <button @click="countByFive()">Increase Count by 5</button> 
      <button @click="clearCount()">Clear Count</button> 
    </div> 
</template> 
<script>    
export default { 
    data: function() { 
      return { 
        count: 0 
      } 
    }, 
    methods: { 
      countIncrement() { 
        this.count++; 
      }, 
      clearCount() { 
        this.count = 0; 
      }, 
      countByFive() { 
        this.count += 5; 
      } 
    } 
  }    
</script> 


위와 같이 몇 가지 메서드만 있으면 그리 나빠 보이지 않습니다. 그러나 컴포넌트에 더 많은 기능을 추가함에 따라 로직은 컴포넌트 옵션 전반에 걸쳐 점점 더 많이 파편화됩니다.

<template> 
<div> 
  <h1>Counter</h1> 
      <p>Count: </p> 
      <button @click="countIncrement()">Increase Count</button> 
      <button @click="countByFive()">Increase Count by 5</button> 
      <button @click="clearCount()">Clear Count</button> 
    </div>    
</template>    
<script> 
import { ref } from "@vue/composition-api";    
export default { 
    setup() { 
      const count = ref(0); 
      function countIncrement() { 
        this.count++; 
      } 
      function clearCount() { 
        this.count = 0; 
      } 
      function countByFive() { 
        this.count += 5; 
      } 
      return { count, countIncrement, clearCount, counyByFive ;     } 
  }    
</script> 


컴퍼지션 API에서는 컴포넌트 옵션을 버리고 이 옵션을 setup() 메서드로 교체합니다. 이제 컴포넌트 옵션의 제한을 받는 대신 로직과 기능에 가장 적합한 방식으로 컴포넌트를 구성할 수 있습니다.

이렇게 하면 다른 개발자도 더 쉽게 코드를 읽고 컴포넌트 이면의 로직을 이해할 수 있습니다. 이것은 컴포넌트의 규모가 커지면서 더 많은 로직을 포함할 때 특히 유용합니다.

개발자는 컴퍼지션 API를 사용할 필요도 없습니다. Vue 3가 계속해서 컴포넌트 옵션을 지원하기 때문입니다. 컴포넌트 옵션 모델을 사용하는 것이 더 편하다면 동일한 컴포넌트 구조를 유지하면서 Vue 3를 사용할 수 있습니다.


코드 재사용 가능성

컴퍼지션 API의 목표는 Vue 2에 있었던 다른 문제인 코드 재사용 가능성을 해결하는 것입니다. Vue 2가 코드 재사용을 허용한 두 가지 방식은 mixin과 범위가 지정된 슬롯을 통한 것이었습니다. 그러나 두 방식 모두 결점이 있습니다.


Mixin

Mixin은 컴포넌트가 속성과 메서드를 공유할 수 있게 설계되었습니다. 베이스 카운터의 속성과 메서드를 다른 카운터와 공유하고 싶다고 가정합시다. 이를 위해서는 새 카운터가 사용할 수 있는 베이스 카운터의 mixin을 만들어야 합니다.

const counterMixin = {      
data: function() {  
  return {    
    count: 0 
  } 
}, 
methods: { 
  countIncrement() { 
      this.count++; 
  }, 
  clearCount() { 
      this.count = 0; 
  }, 
  countByFive() { 
      this.count += 5; 
  }, 
} 
}    
export default { 
    mixins: [counterMixin] 
} 
​

여기서는 mixin을 만들어 내보낼 수 있게 허용합니다. 그런 다음, mixin 구성 속성에 추가하여 이 mixin을 사용해야 하는 모든 컴포넌트로 가져올 수 있습니다. 그러나 mixin의 문제점 중 하나는 충돌이 일어나기 쉽다는 것입니다.

mixin에 있는 속성 이름이 이 mixin을 사용하는 컴포넌트의 속성 이름과 일치하는 경우 컴포넌트는 속성의 값을 유지하는 것을 최우선으로하고 mixin의 속성을 버립니다.

또한 mixin은 유연성이 없어 메서드가 자체 기본 기능으로 제한되며 mixin을 사용하는 컴포넌트의 요구 사항에 따라 기능을 수행하도록 구성할 수 없습니다.


범위가 지정된 슬롯

Vue 2는 개발자가 코드를 재사용할 수 있는 방식으로 범위가 지정된 슬롯도 제공했습니다. 표준 슬롯을 통해 렌더링된 요소를 전달할 수 있었지만, 범위가 지정된 슬롯을 사용하면 사용자 정의 템플릿을 만들 수 있었습니다. 범위가 지정된 슬롯은 이 템플릿을 사용하여 부모 요소에서 템플릿을 렌더링합니다.

여기서는 사용자의 이름을 연결된 수 값과 함께 표시하는 방법을 보여드리겠습니다.

<template> 
    <div> 
      <slot v-for="item in items" :item="item"> 
        <!-- fallback content here --> 
      </slot> 
    </div>    
</template>    
<script>    
export default { 
    props: { 
      items: { 
        type: Array, 
        default: () => [] 
      } 
    } 
  }; 
</script> 

이 템플릿은 항목 특성을 슬롯 요소에 바인딩하여 부모 요소에 사용할 수 있도록 합니다. 이렇게 하면 이 템플릿을 사용할 때 수정할 수 있습니다.

여기서는 데이터가 템플릿에 제공되지 않을 때 대체 콘텐츠가 없습니다. 일반적으로 어떤 대체 데이터를 표시하기 위해 설정된 것이 있을 것입니다.

<template>   
<div id="app">     
  <div class="list-title">Counter List</div> 
    <List :items="listItems">    
      <div slot-scope="row" class="list-item1">  
          <span>Name:</span><span>Count:</span> 
      </div> 
    </List> 
    </div> 
</div> 
</template>    
<script>    
import List from "./components/List.vue";    
export default { 
    components: { 
      List 
    }, 
    data() { 
      return { 
        listItems: [ 
          { name: "Bill", count: "6" }, 
          { name: "Susan", count: "13" }, 
          { name: "Jim", count: "2" }, 
        ] 
      }; 
    } 
  }; 
</script> 

범위가 지정된 슬롯을 사용해 템플릿을 렌더링하는 방법뿐 아니라 템플릿을 수정하여 표시해야 할 콘텐츠를 렌더링하는 방법도 알 수 있습니다. 이를 통해 유연성과 관련된 mixin의 문제점 중 일부를 해결할 수 있지만 범위가 지정된 슬롯은 여전히 한계점이 있습니다.

더 복잡한 템플릿에는 들여쓰기가 더 많아 코드의 가독성이 떨어지고 범위가 지정된 슬롯 역시 다수의 구성을 설정해야 합니다. 또한 범위가 지정된 슬롯은 여러 컴포넌트에 걸쳐 코드를 분할하므로 성능 비용도 있습니다.


컴퍼지션 함수

Vue 3의 컴퍼지션 API는 코드 재사용 가능성 문제를 해결하는 또 하나의 방식으로 컴퍼지션 함수를 표로 가져옵니다. 컴퍼지션 함수는 구성을 수락하여 여러 컴포넌트에 걸쳐 이를 손쉽게 사용자 정의하고 사용할 수 있도록 합니다.

먼저 사용할 컴퍼지션 함수를 정의해야 합니다. 이 경우에는 다음과 같이 일반 수 증가 및 수 재설정 메서드를 만들 것입니다.

export default function useIncrement({ increment }) {}

export default function useReset({ value }) {}

그런 다음, 이 함수를 컴포넌트로 가져와야 합니다. 가져온 후에는 이 함수에 대해 사용할 구성을 이 함수에 전달하고, 이어서 다음과 같이 setup() 메서드에서 이 함수를 반환하여 이 함수에 대한 액세스 권한을 컴포넌트에 부여하면 됩니다.

<script> 
import { ref } from "@vue/composition-api"; 
import useIncrement from "./components/countIncrements"; 
import useReset from "./components/countReset"; 
export default { 
setup() { 
  const count = ref(0); 
  const countIncrement = useIncrement( /* configurations */ ); 
  const countReset = useReset( /* configurations */ ); 
  return { count, countIncrement, countReset }; } 
} 
</script> 

이러한 컴퍼지션 함수를 설정함으로써 이제 응용 프로그램 전체에서 이 함수를 사용하고 요구 사항에 맞게 사용자 정의할 수 있습니다. 카운터가 0으로 재설정되지 않고 대신에 10으로 재설정되기를 원할 수도 있습니다. 이때 함수의 구성에 다른 값을 전달하기만 하면 요구 사항에 따라 작동할 것입니다.

컴퍼지션 함수는 다량의 초과 코드를 잘라내어 코드를 더 읽기 쉽게 만듭니다. 구성을 통해 응용 프로그램 전반에 걸쳐 컴퍼지션 함수를 사용자 정의하면 코드의 재사용 가능성이 커집니다. 함수이기 때문에 Intellisense의 지원을 받습니다.


맺음말

컴퍼지션 API의 목표는 Vue 3에서 코드 재사용 가능성 및 코드 가독성 문제를 모두 해결하는 것입니다. 컴포넌트 옵션을 API의 setup() 메서드로 교체함으로써 컴퍼지션 API는 개발자가 컴포넌트 옵션을 통해 컴포넌트를 구성함으로 인해 제약을 받는 대신 로직 및 기능으로 컴포넌트를 구성할 수 있도록 합니다.

컴퍼지션 함수를 통해 재사용 가능한 함수를 쉽게 만들 수 있습니다. 이로써 이 함수를 사용하는 컴포넌트의 요구 사항에 맞게 사용자 정의하는 구성을 수락할 수 있습니다.


  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.