라이프사이클과 Composables

<script setup lang="ts">
import {
  ref, onMounted, onUpdated, onUnmounted, onBeforeUnmount
} from 'vue';

const data = ref(null);
const timer = ref<number | null>(null);

// 마운트 후 — DOM에 접근 가능, API 호출 등
onMounted(() => {
  console.log('컴포넌트가 DOM에 마운트됨');
  fetchData();

  timer.value = window.setInterval(() => {
    console.log('폴링 중...');
  }, 5000);
});

// 업데이트 후
onUpdated(() => {
  console.log('반응형 데이터 변경으로 DOM 업데이트됨');
});

// 언마운트 전 — 정리 작업
onBeforeUnmount(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
  console.log('타이머 정리 완료');
});

async function fetchData() {
  const res = await fetch('/api/data');
  data.value = await res.json();
}
</script>

// composables/useFetch.ts
import { ref, watchEffect } from 'vue';

export function useFetch<T>(url: string) {
  const data = ref<T | null>(null);
  const error = ref<string | null>(null);
  const loading = ref(true);

  async function execute() {
    loading.value = true;
    error.value = null;
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error("HTTP " + res.status);
      data.value = await res.json();
    } catch (e: any) {
      error.value = e.message;
    } finally {
      loading.value = false;
    }
  }

  execute();

  return { data, error, loading, refetch: execute };
}

<!-- 컴포넌트에서 composable 사용 -->
<script setup lang="ts">
import { useFetch } from '@/composables/useFetch';

type User = { id: number; name: string; email: string };
const { data: users, loading, error } = useFetch<User[]>('/api/users');
</script>

<template>
  <div v-if="loading">로딩 중...</div>
  <div v-else-if="error">에러: {{ error }}</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">
      {{ user.name }} ({{ user.email }})
    </li>
  </ul>
</template>

// composables/useLocalStorage.ts
import { ref, watch } from 'vue';

export function useLocalStorage<T>(key: string, defaultValue: T) {
  const stored = localStorage.getItem(key);
  const data = ref<T>(stored ? JSON.parse(stored) : defaultValue);

  watch(data, (newVal) => {
    localStorage.setItem(key, JSON.stringify(newVal));
  }, { deep: true });

  return data;
}

// 사용
const settings = useLocalStorage('settings', {
  theme: 'light',
  fontSize: 14,
});