ref()와 reactive(), 어떤 때 무엇을 쓰나요?

원시·단일 값·재할당이 많은 건 ref, 객체 묶음을 반응형으로·속성 전개를 쓰는 건 reactive가 흔합니다. reactive에 원시를 넣는 실수, toRefs로 분해하는 패턴이 있습니다.

watch와 watchEffect 차이는?

watchEffect는 자동으로 의존을 추적·즉시 실행되고, watch는 소스(탐지 대상)를 명시해 세밀하게 제어합니다. flush·옵션도 함께 봅니다.

Composable이 길어지면?

도메인·시간·입출력 별로 파일을 나누고, 인자/반환을 명확한 타입으로 둡니다. 전역 ref 누락(싱글톤)을 피하고 Pinia/라우트 경계로 나눕니다.

Options API로 남겨둬야 할 때는?

레거시·서드파티·팀 룰로 혼용하는 경우를 빼고, 재사용·타입·로직 응집이 필요하면 Composable 쪽이 유리한 경우가 많습니다.

Vue 3 Composition API 완벽 가이드 | ref·reactive

2026년 4월 7일 · 3분 읽기 · 수정 2026년 4월 7일 중급

이 글의 핵심

Vue 3 Composition API로 재사용 가능한 로직을 작성하는 완벽 가이드. ref, reactive, computed, watch, composables, Pinia까지 실전 예제로 정리. Start now.

이 글의 핵심

Vue 3 Composition API로 재사용 가능한 로직을 작성하는 완벽 가이드입니다. ref, reactive, computed, watch, composables, Pinia까지 실전 예제로 정리했습니다.

실무 경험 공유: Options API에서 Composition API로 마이그레이션하면서, 코드 재사용성을 80% 향상시키고 TypeScript 지원을 크게 개선한 경험을 공유합니다.

들어가며: “Options API가 복잡해요”

실무 문제 시나리오

시나리오 1: 로직 재사용이 어려워요

Mixins는 출처가 불명확합니다. Composition API는 명확합니다. 시나리오 2: TypeScript 지원이 약해요

Options API는 타입 추론이 어렵습니다. Composition API는 완벽합니다. 시나리오 3: 관련 로직이 흩어져 있어요

data, methods, computed가 분리되어 있습니다. Composition API는 함께 작성합니다.

1. Vue 3 Composition API란?

핵심 특징

Composition API는 Vue 3의 새로운 API 스타일입니다. 주요 장점:

로직 재사용: Composables로 추출
TypeScript: 완벽한 타입 추론
코드 구조: 관련 로직을 함께 작성
트리 쉐이킹: 사용하지 않는 기능 제거
유연성: 더 많은 제어

2. ref와 reactive

ref (단일 값)

<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
const message = ref('Hello');
function increment() {
  count.value++;
}
</script>
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

reactive (객체)

<script setup lang="ts">
import { reactive } from 'vue';
const state = reactive({
  count: 0,
  message: 'Hello',
  user: {
    name: 'John',
    email: '[email protected]',
  },
});
function increment() {
  state.count++;
}
</script>
<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>User: {{ state.user.name }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

3. computed

계산된 값

<script setup lang="ts">
import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});
const reversedName = computed(() => {
  return fullName.value.split(').reverse().join(');
});
</script>
<template>
  <div>
    <input v-model="firstName" placeholder="First name" />
    <input v-model="lastName" placeholder="Last name" />
    <p>Full name: {{ fullName }}</p>
    <p>Reversed: {{ reversedName }}</p>
  </div>
</template>

4. watch와 watchEffect

watch

<script setup lang="ts">
import { ref, watch } from 'vue';
const count = ref(0);
const message = ref(');
// 단일 소스 감시
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});
// 여러 소스 감시
watch([count, message], ([newCount, newMessage]) => {
  console.log(`Count: ${newCount}, Message: ${newMessage}`);
});
// 즉시 실행
watch(count, (value) => {
  console.log(`Count: ${value}`);
}, { immediate: true });
</script>

watchEffect

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
const count = ref(0);
const doubled = ref(0);
// 자동으로 의존성 추적
watchEffect(() => {
  doubled.value = count.value * 2;
  console.log(`Count: ${count.value}, Doubled: ${doubled.value}`);
});
</script>

5. Composables (재사용 가능한 로직)

useMouse

// composables/useMouse.ts
import { ref, onMounted, onUnmounted } from 'vue';
export function useMouse() {
  const x = ref(0);
  const y = ref(0);
  function update(event: MouseEvent) {
    x.value = event.pageX;
    y.value = event.pageY;
  }
  onMounted(() => {
    window.addEventListener('mousemove', update);
  });
  onUnmounted(() => {
    window.removeEventListener('mousemove', update);
  });
  return { x, y };
}

// 사용
<script setup lang="ts">
import { useMouse } from './composables/useMouse';
const { x, y } = useMouse();
</script>
<template>
  <div>Mouse position: {{ x }}, {{ y }}</div>
</template>

useFetch

// composables/useFetch.ts
import { ref } from 'vue';
export function useFetch<T>(url: string) {
  const data = ref<T | null>(null);
  const error = ref<Error | null>(null);
  const loading = ref(false);
  async function fetchData() {
    loading.value = true;
    error.value = null;
    try {
      const response = await fetch(url);
      data.value = await response.json();
    } catch (e) {
      error.value = e as Error;
    } finally {
      loading.value = false;
    }
  }
  fetchData();
  return { data, error, loading, refetch: fetchData };
}

// 사용
<script setup lang="ts">
import { useFetch } from './composables/useFetch';
interface User {
  id: number;
  name: string;
  email: string;
}
const { data, loading, error } = useFetch<User[]>('/api/users');
</script>
<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>
  </div>
</template>

6. Pinia (상태 관리)

설치

npm install pinia

설정

// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');

Store 정의

// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const doubled = computed(() => count.value * 2);
  function increment() {
    count.value++;
  }
  function decrement() {
    count.value--;
  }
  return { count, doubled, increment, decrement };
});

사용

<script setup lang="ts">
import { useCounterStore } from './stores/counter';
const counter = useCounterStore();
</script>
<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Doubled: {{ counter.doubled }}</p>
    <button @click="counter.increment">+</button>
    <button @click="counter.decrement">-</button>
  </div>
</template>

7. Lifecycle Hooks

<script setup lang="ts">
import {
  onMounted,
  onUpdated,
  onUnmounted,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount,
} from 'vue';
onBeforeMount(() => {
  console.log('Before mount');
});
onMounted(() => {
  console.log('Mounted');
});
onBeforeUpdate(() => {
  console.log('Before update');
});
onUpdated(() => {
  console.log('Updated');
});
onBeforeUnmount(() => {
  console.log('Before unmount');
});
onUnmounted(() => {
  console.log('Unmounted');
});
</script>

8. 실전 예제: Todo 앱

<script setup lang="ts">
import { ref, computed } from 'vue';
interface Todo {
  id: number;
  text: string;
  done: boolean;
}
const todos = ref<Todo[]>([
  { id: 1, text: 'Learn Vue 3', done: false },
  { id: 2, text: 'Build an app', done: false },
]);
const newTodo = ref(');
const activeTodos = computed(() => 
  todos.value.filter(t => !t.done)
);
const completedTodos = computed(() => 
  todos.value.filter(t => t.done)
);
function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      done: false,
    });
    newTodo.value = ';
  }
}
function toggleTodo(id: number) {
  const todo = todos.value.find(t => t.id === id);
  if (todo) {
    todo.done = !todo.done;
  }
}
function removeTodo(id: number) {
  todos.value = todos.value.filter(t => t.id !== id);
}
</script>
<template>
  <div>
    <h1>Todo App</h1>
    <form @submit.prevent="addTodo">
      <input v-model="newTodo" placeholder="What needs to be done?" />
      <button type="submit">Add</button>
    </form>
    <div>
      <p>Active: {{ activeTodos.length }} / Completed: {{ completedTodos.length }}</p>
    </div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input
          type="checkbox"
          :checked="todo.done"
          @change="toggleTodo(todo.id)"
        />
        <span :class="{ done: todo.done }">{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>
<style scoped>
.done {
  text-decoration: line-through;
  color: #999;
}
</style>

정리 및 체크리스트

핵심 요약

Composition API: Vue 3의 새로운 API
ref/reactive: 반응형 상태
computed: 계산된 값
watch: 상태 감시
Composables: 로직 재사용
Pinia: 현대적인 상태 관리

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

Vue, Vue 3, Composition API, Pinia, Frontend, JavaScript, TypeScript

자주 묻는 질문 (FAQ)

Q. Options API와 Composition API, 어떤 걸 사용해야 하나요?

A. 새 프로젝트는 Composition API를 권장합니다. 더 유연하고 TypeScript 지원이 좋습니다.

Q. ref vs reactive, 언제 뭘 쓰나요?

A. 단일 값은 ref, 객체는 reactive를 사용하세요. 하지만 ref만 사용해도 충분합니다.

Q. Vuex vs Pinia, 어떤 게 나은가요?

A. Pinia가 더 간단하고 TypeScript 지원이 좋습니다. Vue 3에서는 Pinia를 권장합니다.

Q. React Hooks와 비슷한가요?

A. 개념은 비슷하지만 구현이 다릅니다. Vue는 반응성 시스템이 내장되어 있어 더 간단합니다.

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「Vue 3 Composition API 완벽 가이드 | ref·reactive·computed·watch·Pinia」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「Vue 3 Composition API 완벽 가이드 | ref·reactive·computed·watch·Pinia」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.

Keyboard Shortcuts

이 글의 핵심

이 글의 핵심

들어가며: “Options API가 복잡해요”

실무 문제 시나리오

data, methods, computed가 분리되어 있습니다. Composition API는 함께 작성합니다.

1. Vue 3 Composition API란?

핵심 특징

2. ref와 reactive

ref (단일 값)

reactive (객체)

3. computed

계산된 값

4. watch와 watchEffect

watch

watchEffect

5. Composables (재사용 가능한 로직)

useMouse

useFetch

6. Pinia (상태 관리)

설치

설정

Store 정의

사용

7. Lifecycle Hooks

8. 실전 예제: Todo 앱

정리 및 체크리스트

핵심 요약

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

자주 묻는 질문 (FAQ)

Q. Options API와 Composition API, 어떤 걸 사용해야 하나요?

Q. ref vs reactive, 언제 뭘 쓰나요?

Q. Vuex vs Pinia, 어떤 게 나은가요?

Q. React Hooks와 비슷한가요?

심화 부록: 구현·운영 관점

내부 동작과 핵심 메커니즘

프로덕션 운영 패턴

확장 예시: 엔드투엔드 미니 시나리오

문제 해결(Troubleshooting)

이 글이 도움이 되셨나요?