[Vue.js] Composition API

✅ Composition API란?

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

<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에서 바로 하면 된다.

<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

📦 주요 API 정리

✅ 장점

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

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

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

📌 언제 쓰면 좋을까?

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

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

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