Vue.js 3.0 컴포지션 API 활용 실전 가이드

import { ref, computed, onMounted, watch } from 'vue'

export default {
  setup() {
    // 반응형 상태 정의
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    // 메서드 정의
    function increment() {
      count.value++
    }

    // 라이프사이클 훅
    onMounted(() => {
      console.log('컴포넌트가 마운트되었습니다.')
    })

    // 감시자
    watch(count, (newValue, oldValue) => {
      console.log(`count가 ${oldValue}에서 ${newValue}로 변경되었습니다.`)
    })

    // 템플릿에서 사용할 값들을 반환
    return {
      count,
      doubleCount,
      increment
    }
  }
}

// useCounter.js
import { ref, computed } from 'vue'

export function useCounter() {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  return {
    count,
    doubleCount,
    increment,
    decrement
  }
}

// Counter.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, doubleCount, increment, decrement } = useCounter()

    return {
      count,
      doubleCount,
      increment,
      decrement
    }
  }
}
</script>

// useRouter.js
import { useRouter, useRoute } from 'vue-router'
import { computed } from 'vue'

export function useNavigation() {
  const router = useRouter()
  const route = useRoute()

  const currentPath = computed(() => route.path)

  function navigateTo(path) {
    router.push(path)
  }

  return {
    currentPath,
    navigateTo
  }
}

// Navigation.vue
<template>
  <div>
    <p>Current Path: {{ currentPath }}</p>
    <button @click="navigateTo('/')">Home</button>
    <button @click="navigateTo('/about')">About</button>
  </div>
</template>

<script>
import { useNavigation } from './useRouter'

export default {
  setup() {
    const { currentPath, navigateTo } = useNavigation()

    return {
      currentPath,
      navigateTo
    }
  }
}
</script>

// useApi.js
import { ref } from 'vue'
import axios from 'axios'

export function useApi(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  async function fetchData() {
    loading.value = true
    try {
      const response = await axios.get(url)
      data.value = response.data
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  }

  return {
    data,
    error,
    loading,
    fetchData
  }
}

// UserList.vue
<template>
  <div>
    <div v-if="loading">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <ul v-else>
      <li v-for="user in data" :key="user.id">{{ user.name }}</li>
    </ul>
    <button @click="fetchData">Reload</button>
  </div>
</template>

<script>
import { onMounted } from 'vue'
import { useApi } from './useApi'

export default {
  setup() {
    const { data, error, loading, fetchData } = useApi('https://api.example.com/users')

    onMounted(fetchData)

    return {
      data,
      error,
      loading,
      fetchData
    }
  }
}
</script>