Vue3 Composition API (컴포저블)

🎯 Vue 3에서 composables란?

---

1️⃣ 기본 개념

Vue.js 공식 사이트 컴포저블

Vue 컴포지션 API를 활용하여 상태 저장 로직를 캡슐화하고 재사용하는 함수이다.

➡️ 반복되는 로직을 하나의 함수로 묶어서 여러 컴포넌트에서 쉽게 재사용할 수 있도록 하는 패턴이라고 생각하면 쉬움 !

( --React의 hook과 유사한 부분이 있는데 부분적으로 React의 hook에서 영감을 얻었고, 로직 구성 측면에서 hook과 유사하다. 그러나 Vue 컴포저블은 Vue의 세분화된 반응성 시스템을 기반으로 하며, 이는 React hook의 실행 모델과 근본적으로 다릅니다--)

---

2️⃣ 왜 composables을 사용할까?

1) 로직을 재사용하기 쉽게 만듦

• 여러 컴포넌트에서 동일한 기능을 사용해야 할 때, composables로 분리하면 중복을 줄일 수 있다.

2) 코드를 더 깔끔하게 유지

• 컴포넌트 내부가 너무 복잡해지는 걸 방지할 수 있다.

3) composition API와 함께 사용하기 적합하다.

• setup() 함수 안에서 반응형 데이터(ref, reactive), watch, computed 같은 것들을 관리할 수 있다.

---

🔹composables 기본 예제

1️⃣ composables/useCounter.ts 파일 생성

import { ref } from 'vue';

export function useCounter() {
    const count = ref(0);

    function increment() {
        count.value++;
    }

    function decrement() {
        count.value--;
    }

    return {
        count,
        increment,
        decrement
    };
}

🠊 이 함수를 여러 컴포넌트에서 재사용 가능하다

---

🔥 다른 예제: 로그인 정보 저장 (useAuth.ts)

1️⃣ composables/useAuth.ts 파일 생성 (로그인 및 아이디 저장 로직을 관리)

import { ref, watch } from 'vue';

export function useAuth() {
    const userId = ref(localStorage.getItem('savedUserId') || '');
    const isSavedId = ref(userId.value !== '');

    watch(userId, (newId) => {
        if (isSavedId.value) {
            localStorage.setItem('savedUserId', newId);
        } else {
            localStorage.removeItem('savedUserId');
        }
    });

    return {
        userId,
        isSavedId
    };
}

---

2️⃣ useAuth.ts를 Vue 컴포넌트에서 사용

<script setup lang="ts">
import { useAuth } from '@/composables/useAuth';

const { userId, isSavedId } = useAuth();
</script>

<template>
  <input v-model="userId" placeholder="아이디 입력" />
  <label>
    <input type="checkbox" v-model="isSavedId" /> 아이디 저장
  </label>
</template>

✔ useAuth에서 localStorage를 활용하여 아이디 저장 기능을 구현할 수 있다
✔ 컴포넌트가 많아져도 useAuth.ts를 그대로 재사용할 수 있어서 유지보수가 편리해짐.

💡useAuth.ts는
1. 다른 페이지에서도 로그인 상태를 관리해야 할 경우
🠊 예를 들어, 로그인 페이지뿐만 아니라 헤더, 마이페이지 등에서 로그인 상태를 확인해야 한다면 공통 로직을 composables로 분리하는 게 좋다!
2. 다른 로그인 관련 기능을 추가할 가능성이 높을 경우
🠊 이후에 자동 로그인, 로그아웃, 사용자 세션 관리 같은 기능이 추가될 가능성이 있다면 useAuth.ts를 만들어 두는 게 유지보수하기 좋다.

---

📝 정리
📌composables는 Vue 3의 Composition API를 활용하여 재사용 가능한 로직을 분리하는 함수
📌Vuex, localStorage, API 호출, 폼 유효성 검사 같은 기능을 composables로 분리하면 더 깔끔하고 유지보수하기 쉬운 코드를 만들 수 있음
📌composables 파일은 composables/ 폴더로 따로 관리하기 !