🌳 Composition API vs Options API - 무엇을 언제 써야 할까?

🌳 Composition API vs Options API - 무엇을 언제 써야 할까?

Vue 고급 시리즈 > 7️⃣ 고급 주제 및 최적화 > Composition API vs Options API 비교

• 1. 두 API 방식의 차이는?
• 2. 문법 차이와 구조 비교
• 3. 언제 Composition API를 선택할까?
• 4. 두 방식을 혼용해도 될까?
• 5. 타입스크립트와의 궁합
• 6. 선택 기준 요약
• 🔚 다음 글 안내

---

1. Composition API vs Options API란?

Vue는 오랫동안 Options API(data, methods, computed 등으로 구성된 방식)를 사용해왔습니다.
Vue 3에서는 Composition API가 추가되어 기능별 코드 재사용성과 가독성을 크게 향상시킬 수 있게 되었습니다.

2. 문법 구조 비교

✅ Options API 예시

<script>
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

✅ Composition API 예시

<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => count.value++;
</script>

🔍 차이 요약

항목	Options API	Composition API
코드 위치	기능별로 분산 (data, methods 등)	기능 단위로 묶음 (logic 중심)
가독성	초보자에게 쉬움	로직 복잡해지면 오히려 더 명확
재사용성	mixin 사용 전역에서 mixin으로 주입됨( 로직 출처가 불명확) 충돌 위험 있음 (data, methods 이름)	composition 함수로 분리 명시적으로 import 해서 사용( 로직의 출처가 명확) 변수명 scope 명확
타입 지원	제한적	타입스크립트와 최적
Vue 2 지원	O	Vue 3 전용

3. 언제 Composition API를 쓸까?

• 로직이 복잡해질 때: 여러 컴포넌트에서 공통 기능을 분리해 재사용하고 싶을 때
• 유틸/훅 함수처럼 logic 단위로 분리하고 싶을 때
• 타입스크립트 기반 프로젝트: ref, reactive, computed 등으로 타입 추론이 강력함
• VueUse, Pinia 등 Composition 기반 라이브러리와 연계할 때

📌 반대로 간단한 CRUD 화면, 컴포넌트가 1회성일 때는 Options API가 오히려 더 직관적입니다.

4. 두 방식을 혼용해도 될까?

Vue 3에서는 하나의 프로젝트 내에서 Options API와 Composition API를 함께 사용하는 것이 가능합니다.

• 같은 컴포넌트 내에서는 둘 중 하나만 사용하는 것을 권장
• 전체적으로 Composition API를 채택하면서, 일부 레거시 코드는 Options API로 남겨도 무방

<script>
import { ref, computed } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);
    return { count, double };
  }
}
</script>

5. 타입스크립트와의 궁합

Composition API는 TS 타입 추론과 선언이 훨씬 강력합니다.

• ref<number>(0)처럼 초기 타입을 명확히 지정 가능
• setup() 내부에 모든 로직이 들어 있어 IDE 자동완성과 디버깅이 쉬움

6. 어떤 API를 선택할까?

상황	추천 방식
간단한 UI 렌더링 중심	Options API
공통 로직 재사용, 유틸 구성	Composition API
Vue 2 유지보수	Options API
Vue 3 + TS 신규 프로젝트	Composition API

🔚 다음 글 예고

Composition API의 유연성과 구조적 장점에 대해 살펴보았습니다. 다음 글에서는 Vue의 컴포넌트 메모리 누수 방지 패턴을 중심으로 컴포넌트 생명주기와 클린업 방식에 대해 알아보겠습니다.

👉 다음 글: 컴포넌트 메모리 누수 방지 패턴 정리