[TIL # 47] Vue Composition API (1)

컴포지션 API가 필요한 이유

Options API는 동일한 논리적 문제를 처리하는 코드가 파일의 다른 옵션으로 분할되고 있다. 프로젝트가 커질 수록 코드가 길어지면 동일한 문제를 처리하는 코드를 이해하기 위해 불편하다.

반면에 Composition API는 동일한 논리적 문제와 관련된 코드를 함께 그룹화할 수 있다. 특정 논리적 문제를 작업하는 동안 더 이상 다른 옵션 블록 사이를 이동할 필요가 없다.
또한, 추출을 위해 더 이상 코드를 섞을 필요가 없기 때문에 최소한의 노력으로 코드 그룹을 외부 파일로 이동할 수 있다.
리팩토링을 위한 이러한 방법은 대규모 코드베이스에서 장기적인 유지 관리의 핵심이다.

setup 함수

Composition API 작업을 시작하려면, 우선 실제로 사용할 수 있는 장소가 필요하다. Vue 컴포넌트에서는 이 위치를 setup 이라고 부른다.
Vue 3에서는 컴포넌트 객체에 setup 함수를 사용할 수 있다.

export default{
  setup(){
    //data
    
    //methods
    
    //computed
    
    //lifecycle hooks
  }
}

script setup 문법

Vue 3에서 제공하는script setup 문법
<script setup> 은 SFC(Single File Components) 내에서 컴포지션 API를 사용하기 위한 컴파일 타임 syntactic sugar이다.

// <script> 블록에 setup 속성 추가

<script setup>
console.log('hello script setup')
</script>

내부 코드는 구성 요소의 setup() 함수 의 내용으로 컴파일된다. 즉, 구성 요소를 처음 가져올 때 한 번만 실행되는 일반 script 와 달리 script setup 내부의 코드는 구성 요소의 인스턴스가 생성 될 때마다 실행된다.

최상위 바인딩

script 블록을 templaet블록 보다 위에 선언해서 최상위 바인딩를 사용하는 경우 <script setup> (변수, 함수 선언 import 포함) 최상위 바인딩은 내부에 선언 된 <script setup> 템플릿에서 직접 사용할 수 있다.

<script setup>
// variable
const msg = 'Hello!'

// functions
function log() {
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
</template>

// import 방식
<script setup>
import { capitalize } from './helpers'
</script>

<template>
  <div>{{ capitalize('hello') }}</div>
</template>

반응형 데이터

컴포지션 API에서 반응성을 가지는 데이터를 가지려면 ref를 이용한다.

import { ref } from 'vue'
vue 패키지에서 ref를 꺼내서 사용한다.

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

const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

count에 ref로 반응성을 부여해야지 count가 반응형 데이터가 되어 클릭시에 숫자가 증가할 수 있게 변한다.

router

Options API 기준, Vue router를 사용하면 this.$router와 현재 라우트를 this.$route로 접근할 수 있었다. 하지만 컴포지션 API는 this 키워드를 사용 할 수 없다.
따라서 import 로 아래 같이 가져온다.

<script setup>
import { useRoute } from 'vue-router'

const $route = useRoute()
</script>

라이프사이클 훅

• 컴포지션 API는 Created라는 라이프사이클을 가져오는 개념이 없다. 컴포지션 API script자체가 beforeCreate
  , created 환경이다. setup은 beforeCreate, created 라이프사이클 훅 사이에 실행되는 시점이므로 명시적으로 정의할 필요가 없다.

• mounted ➡️ onMounted 컴포지션 api는 라이프사이클 앞에 on 키워드를 붙여준다.

// setup함수 버전

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('컴포넌트가 mounted 되었습니다!')
    })
  }
}

---

참고 자료

Vue 공식 문서 - composition-api
Vue 3의 setup 기능이 제공하는 간결한 컴포넌트 문법