7. 컴포저블(Composables)

리액트를 써본 사람들은 훅(hook)에 대해 알것이다.  Nuxt/Vuejs 에서도 3.0 이후로 비슷한 개념이 생겼는데, 이를 컴포저블이고 하며 Vue 에서는 Composite API 라고 부른다. 

 

아래는 Composition API 에 대한 Vuejs 의 소갯말 이다.

Composition API는 함수 범위에서 직접 반응 상태 변수를 선언하고 여러 함수의 상태를 함께 구성하여 복잡성을 처리하는 데 중점을 둔다.
더 자유로운 형식이며 효과적으로 사용하려면 Vue에서 반응성이 어떻게 작동하는지 이해해야 한다. 대신, 
그 덕분에 로직을 구성하고 재사용하기 위한 더욱 강력한 패턴이 가능해졌다.

 

 

내장 컴포저블과 관련해 자세한 내용은 이 곳을 참고한다.

 

커스텀 컴포저블 생성

반복적으로 호출해서 쓸 수 있는 기능은 컴포저블로 선언하여 공통적으로 어디서나 쓸 수 있다.

프로젝트 루트에 /composables 디렉토리를 생성한 후, 해당 디렉터리에서 useUtils.ts 파일을 생성한다.

 

/composables/useUtils.ts

export const useUtils =  () => {
    const sayHello = () => console.log("Hello");
    return {
        sayHello,
    }
};

 

메인페이지 /pages/index.vue 에서 해당 컴포저블을 사용해 보자.

 

/pages/index.vue

<script setup lang="ts">
  const { sayHello } = useUtils();
  sayHello();

</script>
<template>
  <div>
    <h1>Hello Nuxt 3</h1>
  </div>
</template>

import 구문없이도 아래와 같이 잘 동작(Auto-imports) 한다.

 

 

써드파티 컴포저블

https://vueuse.org/ 를 방문하면 컴포지션 API 를 기초로 한 유용한 유틸리티 함수(컴포저블)들을 참고할 수 있다. 프로젝트를 진행하면서 필요한 대부분의 기능이 준비되어있다.