코딩 자율학습단(Vue.js 프런트엔드 개발 입문) 9일차

7장 컴포지션 API 다루기

7.1 컴포지션 API란

ㅇ 등장배경: 옵션스 API는 데이터, 계산된 속성, 메서드, 라이프사이클 훅 등을 포함한 객체 기반 옵션 속성으로 구성. 직관적이고 단순하며, 뷰의 진입 장벽을 낮추는 역할을 하나 작은 규모 프로젝트에 어울리고 컴포넌트가 복잡해지고 상호 간의 로직을 공유해야 할 때에 코드 재사용성과 유지보수성이 저하되는 문제점 발생.

ㅇ 컴포지션 API의 장점: 함수 친화적이고 필요한 로직을 별도의 자바스크립트 파일에 작성하면 로직을 쉽게 공유 가능

ㅇ 옵션스 API 와 컴포지션 API 비교

// OptionsAPI.vue
<script>
export default {
    data() {
        return {
            count: 0,
        };
    },
    computed: {
        doubleCount() {
            return this.count * 2;
        },
    },
    methods: {
        increment() {
            this.count++;
        },
    },
}
</script>

<template>
    <h1>Count: {{ count }}</h1>
    <h2>Double Count: {{ doubleCount }}</h2>
    <button @click="increment">증가a</button>
</template>

// CompositionAPI.vue
<script setup>
import {computed, ref } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const increment = ()=> count.value++;
</script>

<template>
    <h1>Count: {{ count }}</h1>
    <h2>Double Count: {{ doubleCount }}</h2>
    <button @click="increment">증가c</button>
</template>

7.2 컴포지션 API의 기본 구성 요소

o 반응형 데이터 정의하기

ref(), reactive()

<script setup>
import { ref, reactive } from 'vue';
const 식별자1 = ref(값);
const 식별자2 = reactive(값);
</script>

o 템플릿 ref

o 계산된 속성

computed() : 읽기 전용

<script setup>
import { computed } from 'vue';
const 식별자 = computed( () => {
  return 값;
  });
</script>

get(), set() : 수정가능하나 읽기 전용으로 사용하는 것을 권장

ㅇ 함수 정의

// 형식
<script setup>
const 식별자 = function() {};
const 식별자 = () => {};
</script>

ㅇ 감시자 속성

watch(), watchEffect()

<script setup>
import { watch } from 'vue';
watch(반영형_데이터, (현재값, 이전값) => {}, {
immediate: tru, deep: true, flush: 'post' | 'sync', once: false
});