[Vue.js] Composition API

KangHo Lee

Jun 05, 2025

Contents

✅ Composition API란?🆚 Options API vs Composition API 📦 주요 API 정리 ✅ 장점 📌 언제 쓰면 좋을까?

✅ Composition API란?

setup() 함수 안에서 ref, reactive, computed, watch 등을 활용하여 컴포넌트 로직을 구성하는 방식

App.vue


<script setup>
  import { ref , onMounted, watch} from 'vue';
  import ChildComp from './components/ChildComp.vue';

  let count = ref(0); // 상태변수 초기값(state), import ref 필요
  let title = "Hello Vue";
  let color = ref('green');

  
  onMounted(() => {
    console.log('mounted'); // import onMounted 필요
  })

  const increaseCount = () => {
    count.value++; // let count의 count는 ref에 있기 때문에 .value필요
  }

  watch(color, () => { // import watch 필요
    console.log('color 변경');
  })
</script>

<template>
  <div>
    <h1>{{title}}</h1>
    <button @click="increaseCount">count++</button>
    <p>{{ count }}</p>
    <ChildComp :color="color" bgColor="yellow" />
    <button @click="color='red'">change color</button>
  </div>

</template>

<style scoped>

</style>

ref로 상태변수 초기값 설정

값은 .value로 꺼내야 한다.

라이프사이클 훅을 활용하려면 import onMounted, watch 필요

함수 정의도 script에서 바로 하면 된다.

ChildComp.vue


<template>
    <div>
        <h2>Child Component</h2>
        <p 
            :style="{ 
                color: color, 
                backgroundColor: bgColor
                }"
            >{{ color }}</p>
    </div>
</template>

<script setup>
    // export default 필요 없이 변수로 props 등록
    const props = defineProps ({
        color: String, // 자료형 적는 것은 동일일
        bgColor: String,
    })
    console.log(props.color);
</script>

<style>
  
</style>

script에서 export default 필요 없이 바로 props 등록 가능

🆚 Options API vs Composition API

항목	Options API	Composition API
Vue 2 방식	`data()`, `methods`, `computed` 등 옵션으로 구성	`setup()` 내부에서 로직 작성
구조	기능이 섞여 있음	기능별로 모아서 작성
코드 재사용	믹스인, HOC 등 (한계 있음)	로직을 함수로 분리 (`useXXX()`)
권장 시점	간단한 컴포넌트	복잡한 컴포넌트, 재사용 많은 경우

📦 주요 API 정리

API	설명	예시
`ref()`	원시값 반응형 상태	`const msg = ref("hi")`
`reactive()`	객체 전체를 반응형으로	`const user = reactive({ name: "Lee" })`
`computed()`	계산된 속성	`const double = computed(() => count.value * 2)`
`watch()`	값 변화 감지	`watch(count, (newVal) => console.log(newVal))`
`onMounted()`	생명주기 훅	`onMounted(() => { ... })`

✅ 장점

코드 응집력 향상: 관련된 로직을 한 곳에 모을 수 있음

재사용 쉬움: useXXX 함수로 추출 가능

타입스크립트와 잘 맞음: 명시적이고 함수 중심 구조

📌 언제 쓰면 좋을까?

로직이 복잡하거나 기능별 분리가 필요한 경우

여러 컴포넌트에서 같은 로직을 공유해야 하는 경우

타입스크립트를 적극 활용하는 프로젝트