Vue Composable로 로직 재사용하기

로직을 재사용할 수 있는 Composable

🌱Composable 이란

- 컴포지션 api를 가장 잘 활용할 수 있는 vue의 꽃

- 컴포지션 api를 활용하여 상태 저장 비즈니스 로직을 캡슐화하고 재사용하는 기능을 말한다.

※ 상태 저장 로직은 사용하면서 변경되는 상태 관리가 포함되는 로직을 말한다.

 

🌱Composable 작성 및 사용 방법

Vue 공식 사이트에 있는 예제로 이해해보자

적용 전 : 마우스 위치 추적기

<template>마우스 위치: {{ x }}, {{ y }}</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

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.removeEventListener('mousemove', update))
</script>

- 컴포넌트 내에서 컴포지션 api를 사용하여 마우스 추적 기능을 구현!

- 다른 컴포넌트에서 해당 로직을 재사용하려면 이러한 로직을 외부 파일의 컴포저블 함수로 재구성하여 추출해서 사용할 수 있다!

 

1. 컴포저블 함수로 재구성

// composables/mouse.js
import { ref, onMounted, onUnmounted } from 'vue'

// 컴포저블 함수 이름은 "use"로 시작!!
export function useMouse() {

    // 컴포저블로 캡슐화된 내부에서 관리되는 상태 ★
    const x = ref(0)
    const y = ref(0)

    // 컴포저블 상태 업데이트 함수 
    function update(event) {
        x.value = event.pageX
        y.value = event.pageY
    }

    // 컴포넌트의 생명주기에 연결
    // 마운트될 때 mousemove와 업데이트함수 이벤트 등록
    // 마운트 해제될 때 이벤트 제거!
    onMounted(() => window.addEventListener('mousemove', update))
    onUnmounted(() => window.removeEventListener('mousemove', update))

    // 관리 상태를 반환 값으로 노출
    return { x, y }
}

- Composable 함수는 "use" 로 시작하는 카멜케이스 이름으로 짓는 것이 국룰!

 

2. 작성한 컴포저블 함수 사용하기

<template>마우스 위치: {{ x }}, {{ y }}</template>

<script setup>
    import { useMouse } from './mouse.js'

    const { x, y } = useMouse()
</script>

- 이제 심플하게 해당 로직을 다른 컴포넌트에서도 재사용 할 수 있다!

- 또한 Composable 함수는 반응성에 의존하지 않더라도 ref 파라미터를 입력값으로 받을 수 있다.

※ 그래서 다른 개발자와 함께 사용하는 Composable 함수를 개발할 때는 입력 파라미터가 ref인 경우를 처리하는 경우가 좋다(입력 파라미터를 unref로 처리!)