vue3 composition api 정리

Vue.js Composition API

1. Vue.js 3의 Composition API는 컴포넌트의 로직을 모듈화하고 재사용 가능하게 만드는 새로운 방식의 컴포넌트 구성 방법입니다.

2. setup 함수는 모든 컴포넌트에서 진입점 역할을 하며, 컴포넌트 내부의 데이터, 메소드 및 리액티브 상태를 설정하는 데 사용됩니다.

3. ref와 reactive 함수를 사용하여 데이터를 리액티브하게 만들 수 있으며, computed, watch, onMounted, onUpdated, onBeforeUnmount와 같은 컴포지션 함수를 사용하여 컴포넌트 동작을 정의할 수 있습니다.

4. <script setup>은 Composition API를 사용하여 컴포넌트를 더 간결하게 정의하는 방법으로, setup 함수를 별도로 정의하지 않아도 됩니다.

"use"로 시작하는 커스텀 함수

5. "use"로 시작하는 함수를 사용하여 컴포넌트 로직을 모듈화하고 재사용할 수 있습니다. 이러한 함수는 컴포넌트 내에서 커스텀 로직을 정의하고 다른 컴포넌트에서 재사용할 수 있도록 도와줍니다.

함수형 프로그래밍과의 관련성

6. Vue 3 Composition API는 함수형 프로그래밍의 원리와 개념을 포함하고 있으며, 데이터 불변성, 순수 함수, 함수 조합 및 데이터 변환과 같은 함수형 프로그래밍의 개념을 지원합니다.

이러한 개념과 기술을 활용하여 Vue.js 애플리케이션을 보다 모듈화하고 유지보수 가능하게 만들 수 있으며, 코드의 가독성과 품질을 향상시킬 수 있습니다. Vue.js Composition API와 함수형 프로그래밍을 조합하여 좀 더 강력하고 효율적인 웹 애플리케이션을 개발하는 데 도움이 됩니다.

---

Vue.js Composition API에서 "use" 함수를 활용한 코드 예제를 아래에 제시하겠습니다:

<template>
  <div>
    <p>Count: {{ customLogic.data }}</p>
    <p>Double: {{ customLogic.double }}</p>
    <button @click="customLogic.increment">Increment</button>
  </div>
</template>

<script>
import { useCustomLogic } from './useCustomLogic';

export default {
  setup() {
    const customLogic = useCustomLogic(0);
    return { customLogic };
  }
}
</script>

위 코드에서는 "useCustomLogic" 함수를 사용하여 커스텀 로직을 정의하고, 이 커스텀 로직을 다른 컴포넌트에서 재사용합니다. "useCustomLogic" 함수는 초기값을 받아서 해당 로직을 캡슐화하고, 컴포넌트에서 필요할 때 호출하여 사용합니다.

useCustomLogic 함수는 아래와 같이 정의될 수 있습니다:

import { ref, computed, watch } from 'vue';

function useCustomLogic(initialValue) {
  const data = ref(initialValue);

  const double = computed(() => data.value * 2);

  const increment = () => {
    data.value++;
  };

  watch(data, () => {
    // 데이터가 변경될 때 실행할 동작
  });

  return {
    data,
    double,
    increment,
  };
}

이로써 "use" 함수를 사용하여 컴포넌트 로직을 모듈화하고 재사용할 수 있게 됩니다.