🧩 Composition API이란?
: Vue 3에서 도입된 새로운 컴포넌트 작성 방식
setup()안에서ref,computed,watch같은 "함수 기반 API"로 상태와 로직을 조합
Vue 3 이전에는 Options API가 기본 방식이었고, Vue 3 부터는 Composition API가 권장 방식 됨
기존 방식: Options API
Options API는 컴포넌트 코드를 “역할별”로 나누는 방식
data
methods
computed
watch이 방식은 구조가 명확해 처음 Vue를 처음 접할 때 이해하기 쉬움
👉 비유하자면 "정해진 서랍(data, methods, computed)에 물건을 분류해서 넣는 방식"
다만 컴포넌트가 커질수록 문제 발생 가능
- 하나의 기능(예: 검색 + 필터 + 페이지네이션)이
data,methods,computed,watch에 흩어져서 관리됨 - 기능을 수정하려면 여러 섹션을 왔다 갔다 해야 함
새로운 방식: Composition API
Composition API는 역할이 아니라 기능 단위로 로직을 묶는 방식
- 상태는
ref/reactive - 파생값은
computed - 감시는
watch - 생명주기는
onMounted같은 함수들로
이것들을 setup() 안에서 “필요한 것만 골라서” 조립
👉 비유하자면 “필요한 블록만 골라 기능 단위로 조립하는 레고 방식”
화면이 커져도 기능 단위로 로직을 묶기 쉬움
🤔 왜 Vue 3는 Composition API를 도입했을까?
아래의 두 가지 이유가 자주 언급됨
-
컴포넌트가 커질수록 Options API는 로직이 흩어짐.
기능이 커질수록 “한 기능”이 여러 섹션에 분산되어 읽기 어려워짐 -
Mixin 기반 재사용은 충돌/추적이 어렵고 TS 친화적이지 않음
어디서 온 로직인지 추적하기 어렵고, 이름 충돌 가능성이 있고, TypeScript에서 타입 추론이 어려운 경우가 생길 수 있음
Composition API는 로직을 Composable(컴포저블) 이라는 “함수 단위”로 분리해서 해결함
👉 결과적으로 가독성, 재사용성, TypeScript 호환성 모두 개선됨
⚙️ setup()이란?
: 컴포넌트가 화면에 렌더링되기 전에 실행되는 준비 공간 (Composition API를 사용하는 입구)
setup()에서 주로 하는 일
- 상태 만들기:
ref,reactive - 파생값 만들기:
computed - 변화 감시:
watch - 생명주기 연결:
onMounted등 - 외부 기능 가져오기:
useRouter(),useQuery(),useI18n()등
여기서 만든 값/함수는 템플릿에서 사용할 수 있음
<script setup> 문법
Vue 3에서는 <script setup> 문법을 사용하면 return {} 없이도 자동으로 템플릿에 노출됨
👉 더 간결하고 직관적으로 작성 가능
예시
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
const increase = () => count.value++
</script>
<button @click="increase">{{ count }}</button>
count는 반응형 상태increase는 상태를 변경하는 함수<script setup>별도의 return 없이도 템플릿에서 사용 가능
✨ 정리
Composition API는 Vue 3에서 컴포넌트의 상태와 로직을 setup() 안에서
ref, computed, watch 같은 함수로 조립하는 방식
Options API보다 로직을 기능 단위로 묶기 쉬워서
읽기 쉽고, 재사용하기 쉽고, TypeScript와도 잘 맞는 방향으로 발전함!
