[Vue]Want Reuse? Use Composables, 재사용에는 믹스인 대신 컴포저블

Intro

기존, 그러니까 Vue2에서는 코드를 재사용하기 위한 방법으로 Mixin(믹스인)을 활용했습니다. Vue3로 넘어오면서 Mixin을 대체하는 Composables이 생겼습니다. Vue3 공식 문서에서는 Mixin 대신 Composables를 사용하기를 추천하고 있습니다.

하지만 생각보다 Composables를 소개해주는 문서(혹은 글)가 한국어로 된 건 없더군요. 아직 Vue3는 한국에서 사용하시는 분들이 조금 적은 게 아닌가 싶네요.

어쨌든 공식 문서를 요약하는 글이겠지만 Composables에 대해서 주저리주저리 떠들어보겠습니다

Result

// App.vue

<script setup>
import {useMouse} from '@/composables/mouse';
...

const { x, y } = useMouse();

...
</script>

<template>
  <div>
    Mouse position is at: {{ x }}, {{ y }}
  </div>
    ...
</template>

 

// mouse.js

import {onMounted, onUnmounted, ref} from 'vue';
...

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

    ...

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.addEventListener('mousemove', update))

  return { x, y }
}

 

두 개의 스크립트 중 아래쪽인 mouse.js가 Composables의 구현체입니다.

Composables는 function을 export 하는 것에서 시작합니다.(export default를 사용하셔도 상관없습니다.) ES6에 익숙하신 분들이라면 특별할 것 없는 모습이죠.

composables function(mouse.js)은 ref로 생성된 변수, x와 y를 return 해줍니다. App.vue에서는 composable function을 실행해 x와 y를 return 받아 원하는 용도를 사용하면 됩니다. 이때 ref의 반응성은 사라지지 않고 유지됩니다.

 

전체 소스 코드는 이곳에서 확인 가능하십니다.

주저리주저리

Result에서 보여드린 예제는 Composables를 소개해주는 Vue3의 공식 문서 가장 상단에 있는 기본 예제입니다. 다른 예제 하나만 더 주저리주저리 떠들어보겠습니다.

composables function은 다른 composables function를 사용할 수 있습니다.

// mouse.js

import {useEventListener} from '@/composables/event';

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  useEventListener(window, 'mousemove', update)

  // onMounted(() => window.addEventListener('mousemove', update))
  // onUnmounted(() => window.addEventListener('mousemove', update))

  return { x, y }
}

 

// event.js

import {onMounted, onUnmounted} from 'vue';

export function useEventListener(target, event, callback) {
  onMounted(() => target.addEventListener(event, callback))
  onUnmounted(() => target.addEventListener(event, callback))
}

 

기존 mouse composables function에서 window 객체에 이벤트를 연결했던 부분을 event.js라는 새로운 composables function을 이용해서 풀어낸 모습입니다.

제가 소개해드린 예제 이외에도 공식 문서에서는 비동기 상태에 대한 예제(fetch를 composables function으로 만든 예제)와 composables function에서 unref와 reactive를 활용하는 방법에 대해서 설명해주고 있습니다. 궁금하신 분은 아래 링크로 들어가서 확인하시면 될 것 같습니다.

 

https://vuejs.org/guide/reusability/composables.html

Composables | Vue.js

글 읽어주셔서 감사합니다.