Vue3 - Composables 이용하여 함수 재사용 하기

Composables 란?

Vue3에서 Composables 함수를 만들어서 기능을 캡슐화하거나, 재사용할 수 있습니다.

 

Composables, 컴포저블, 훅, 커스텀 훅스, 커스텀 컴포지션 함수 다 동일한 표현입니다.

이 글에서는 Composables로 사용하도록 하겠습니다.

 

Vue3 이전에는 mixins를 이용해서 재사용을 많이 하였습니다.

하지만, mixins의 단점들로 인해서 Composables 라는 새로운 개념이 생겼고,

 

자바스크립트에서 재사용을 위해 함수를 사용하듯, 함수를 만들어서 재사용할 수 있게 되었습니다.

 

사용법?

폴더 이름과 자바스크립트 파일을 생성합니다.

hooks/alert.js

import { ref } from 'vue';

export default function useAlert() {
  const isVisibleAlert = ref(false);

  function showAlert() {
    isVisibleAlert.value = true;
  }
  function hideAlert() {
    isVisibleAlert.value = false;
  }

  return {
    isVisibleAlert,
    showAlert,
    hideAlert
  };
}

함수를 생성합니다.

이름은 use + 해당 기능으로 함수를 생성합니다.

 

App.vue

// script setup
const {
   isVisibleAlert,
   showAlert,
   hideAlert
} = useAlert();

Alert를 사용하는 기능에서 useAlert를 호출을 하면 사용 가능합니다.

객체를 리턴하였기 때문에, 객체 분해 할당으로 데이터를 받아 올 수 있습니다.

 

mixins 보다 좋은점

재사용 함수를 구성하기가 쉽습니다.

매개변수를 사용할 수 있고, 다양한 용도로 사용할 수 있습니다.

 

mixins의 단점도 보완할 수 있습니다.

mixins는 데이터나 메서드의 출처가 어디인지 파악하기가 어렵습니다.

하지만 Composables는 함수에서 return을 하고 반환받은 값을 꺼내서 사용할 수 있어서 바로 확인할 수 있는 장점이 있습니다

 

Vue3에서도 minxins 기능을 남겨두기는 하지만, 마이그레이션을 위해서 남겨 두었고,

Composables를 사용하라고 추천하고 있습니다.

 

Composables를 이용해서 쉽고 편하게 기능 재사용을 만들어 보시기 바랍니다.