[Vue.JS] Composition API

Composition API

 

Composition API는 Vue.js 3.0에서 새롭게 추가된 API로, 코드를 컴포지션(조합) 하는 방식을 제공한다.

기존의 Options API와 달리, 데이터와 메서드 등을 구분하지 않고 하나의 컴포지션 함수 내에 선언하여 사용하며, 이를 통해 코드의 가독성과 재사용성을 높일 수 있다.

 

Composition API 의 가장 큰 특징은 Setup 이다.beforeCreate 나 created는 setup() 에 포함되고, 나머지 life Cycle은 아래와 같이 변경되었다.

 

Life Cycle
Vue2                    Vue3
beforeCreate  ->  setup()
created  ->  setup()
beforeMount  ->  onBeforeMount
mounted  ->  onMounted
beforeUpdate  ->  onBeforeUpdate
updated  ->  onUpdated
beforeDestroy  ->  onBeforeUnmount
destroyed  ->  onUnmounted
activated  ->  onActivated
deactivated  ->  onDeactivated
errorCaptured  ->  onErrorCaptured

 

 

import { reactive, ref, computed } from 'vue'

export default {
  setup() {
    // 데이터 선언
    const state = reactive({
      count: 0
    });
    // 또는
    const list = ref([]);

    const increment = () => state.count++

    const doubleCount = computed(() => state.count * 2)

    return {
      state,
      list,
      increment,
      doubleCount
    }
  }
}

 

반응형 데이터를 만들기 위해서는 ref 와 reactive 를 사용하여 변경 가능한 반응형 데이터를 만들 수 있다.

computed 의 경우도 반응형 데이터이지만, 읽기만 가능하다.

 

reactive

reactive를 통하여 생성된 데이터는 오직 객체 형태로만 생성 가능하다.

reactive 는 인자로 받은 객체와 완전히 동일한 프록시 객체를 반환하고,

생성된 객체는 Vue 2의 Vue.observable()로 생성한 것과 동일하다.

또한 reactive를 통해 생성된 객체는 모두 Deep 감지를 수행하기 때문에 객체가 중첩된 상황에서도 반응형 데이터를 쉽게 조작하고 처리할 수 있다.

 

export default defineComponent({
  setup() {
    const state: HeaderState = reactive({
      isOpen: false,
      user: null,
      isLogin: computed(() => store.getters["utilModule/isLogin"]),
      userName: computed(() => store.getters["userModule/getName"]),
    })
    
    .
    .
    .
    
    const closeMenu = (payload: boolean): void => {
      state.isOpen = payload;
    }

    return {
      state,
      .
      .
      closeMenu,
    }
  }
})
</script>

 

ref

오직 객체만 받는 reactive랑 다르게 ref는 모든 원시타입(Primitive) 값을 포함한 여러가지 타입을 받을 수 있다.

원본 값은 ref 객체의 value 속성을 통해 접근할 수 있으며, 값을 변경할 때에도 value 속성에 접근하여 조작해야한다.

ref의 값으로 객체가 전달될 경우 reactive 메서드를 통해 Deep 감지를 수행한다.

 

<script lang="ts" setup>
import {ref, Ref} from "vue";

const keyword: Ref<string> = ref('');

const keywordReset = (): void => {
  keyword.value = '';
}
</script>

 

ref 객체는 원본 값을 value 라는 속성에 담아두고 변경을 감시하는 객체 이고,

reactive는 원본 객체 자체에 변경을 감지하는 옵저버를 추가하여 그대로 반환하는 값 이다.

 

 

 

watch, watchEffect

기본 문법)

 

import {watch} from "vue";

watch("참조대상", callbackFunction(newValue, oldValue){});

 

 

예시) 2. setup script 사용

 

<script lang="ts" setup>
import {watch} from "vue";

const route = useRoute();

watch(() => route, () => keywordReset, {deep: true, immediate: false})

</script>

 

 

computed

기본 문법)

 

import {computed} from "vue";

computed(function() { return "" })

 

 

예시) 2. setup script 사용

 

<script lang="ts" setup>
import {computed,ComputedRef} from "vue";

const isLogin: ComputedRef<boolean> = computed(() => store.getters["utilModule/isLogin"]),

</script>

 

 

Props

defineProps

withDefault,

 

<script lang="ts" setup>
import {defineProps} from 'vue';

defineProps<{타입지정}>();

</script>

 

 

<script lang="ts" setup>
import {withDefaults, defineProps} from 'vue';

withDefaults(defineProps<{key: string}>(), {
	key: '',
});

</script>

 

 

예시) 1. setup () 사용

 

<script lang="ts">
import {defineComponent} from "vue";

interface Props {
	scroll: boolean,
}

export default defineComponent({
  props: [
    scroll: {
    	type: Boolean,
        default: false,
    }
  ],
  setup(props: Props) {
    return {
    	props
    }
  }
})

</script>

 

 

예시) 2. setup script 사용

 

<script lang="ts" setup>
import {withDefaults, defineProps} from 'vue';

interface Props {
  color?: FontColor,
  size?: FontSize,
  weight?: FontWeight,
  type?: FontType
}

const props = withDefaults(defineProps<Props>(), {
  color: 'black',
  size: '14',
  weight: 'regular',
  type: 'kor'
});

</script>

 

 

 

Emit

defineEmits

 

 

기본 문법) 

 

<script lang="ts" setup>
import {defineEmits} from "vue";

defineEmits('이벤트명', callbackFn())

</script>

 

 

예시) 2. setup script 사용

 

<script lang="ts" setup>
import {defineEmits} from "vue";

const closeMenu = defineEmits('closeMenu', () => {
  open.value = false;
  return open;
});

</script>

 

 

 

---