Vue3 컴포지션 API로 재사용 로직을 구조화하는 방법 – useXXX() 패턴으로 깔끔한 코드 만들기

1. 왜 재사용 로직 구조화가 필요할까?

Vue2에서는 mixins나 HOC(고차 컴포넌트)를 통해 로직 재사용을 했지만, 다음과 같은 단점이 있었습니다.

이름 충돌 (변수나 메서드 중첩)
추적 어려움 (어디서 가져온 코드인지 모호)
TypeScript 지원 한계

→ Vue3에서는 Composition API를 통해 로직을 모듈화하여, 더 명확하고 유지보수하기 쉬운 구조로 바뀌었어요.

2. Composition API 기반 로직 재사용의 핵심: Composable 함수

Composable이란?
useCounter, useUser, useForm 등과 같이 use로 시작하는 재사용 가능한 함수입니다.
이 안에 ref(), reactive(), watch() 등 반응형 로직을 캡슐화해서, 필요한 컴포넌트에서 불러다 쓰는 방식입니다.

3. 예제: useCounter 컴포저블 함수

composables/useCounter.js

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  const reset = () => count.value = 0

  return {
    count,
    increment,
    reset
  }
}

사용법

<script setup>
import { useCounter } from '@/composables/useCounter'

const { count, increment, reset } = useCounter()
</script>

<template>
  <p>Count: {{ count }}</p>
  <button @click="increment">+</button>
  <button @click="reset">Reset</button>
</template>

4. 구조 설계 팁

항목	예시
네이밍	useXXX() 형태 (e.g. useAuth, useModal)
폴더	/composables, /composables/useCounter.js
단위	로직 단위로 쪼개기 (useTimer, useLocalStorage, useApi)
테스트	함수 단위로 유닛 테스트 가능

5. 기존 Mixins과의 비교

항목	Mixins	Composition API
코드 위치	전역 또는 등록	필요할 때 가져와 사용
네임스페이스	없음 (충돌 위험)	변수명 직접 관리
추적성	낮음	명확한 함수 호출
TypeScript 호환성	낮음	매우 좋음

6. 요약

Vue3에서는 로직을 재사용할 때 Composable 함수 (useXXX) 패턴을 권장
ref, reactive, computed, watch 등을 조합해 기능 단위로 캡슐화 가능
구조가 명확하고 TypeScript와 잘 통합되어 유지보수가 쉬운 코드 작성 가능
Vue 생태계의 많은 라이브러리들도 이 패턴을 따름 (예: VueUse)

저작자표시 (새창열림)

엄마의 인생노트