Composable

nuxt의 Composable에 대해 설명해줘

Nuxt에서 Composable은 Vue 3의 Composition API를 활용해 반복되는 로직을 모듈화하고 재사용할 수 있도록 만든 함수를 의미합니다. Composable을 통해 상태나 로직을 다른 컴포넌트들에서 쉽게 가져다 사용할 수 있어 코드의 유지보수성과 가독성을 높일 수 있습니다.

Composable의 특징과 장점

  1. 로직의 모듈화: Composable은 컴포넌트에서 공통적으로 사용되는 로직을 별도의 함수로 분리해 재사용할 수 있도록 합니다. 예를 들어, 인증 관련 로직이나 API 데이터 요청 로직을 Composable로 만들어 여러 컴포넌트에서 사용할 수 있습니다.
  2. 상태 및 반응성 유지: Composable 내에서는 ref, reactive와 같은 Composition API 기능을 사용하여 상태를 정의하고 반응성을 유지할 수 있습니다. Composable이 반환하는 데이터는 컴포넌트에서 상태처럼 사용할 수 있으며, 반응성을 그대로 가지므로 변경이 있을 때 자동으로 UI가 업데이트됩니다.
  3. 컴포넌트 로직 분리: 컴포넌트의 UI와 로직을 분리하여, 컴포넌트는 UI를 다루는 데 집중하고, 로직은 Composable에 작성함으로써 코드가 더 깔끔하고 읽기 쉬워집니다.
  4. 유연성과 재사용성: 특정 상태나 로직을 사용하는 여러 컴포넌트가 있을 때 Composable을 사용해 코드의 중복을 줄이고, 일관된 방식으로 로직을 적용할 수 있습니다.

Composable의 사용 예시

예를 들어, API 호출이 필요한 로직을 useFetchData라는 Composable로 만들고 이를 여러 컴포넌트에서 재사용할 수 있습니다.

javascript
코드 복사
// composables/useFetchData.js
import { ref, onMounted } from 'vue';

export function useFetchData(url) {
  const data = ref(null);
  const error = ref(null);

  const fetchData = async () => {
    try {
      const response = await fetch(url);
      data.value = await response.json();
    } catch (err) {
      error.value = err;
    }
  };

  onMounted(fetchData);

  return { data, error, fetchData };
}

이렇게 만든 useFetchData Composable은 여러 컴포넌트에서 공통으로 사용할 수 있습니다.

javascript
코드 복사
// 컴포넌트 예시
<script setup>
import { useFetchData } from '~/composables/useFetchData';

const { data, error } = useFetchData('<https://api.example.com/data>');
</script>

<template>
  <div>
    <div v-if="error">Error: {{ error.message }}</div>
    <div v-else-if="data">Data: {{ data }}</div>
    <div v-else>Loading...</div>
  </div>
</template>

Nuxt에서의 Composable 관리와 특징

Nuxt 3에서는 composables/ 폴더 안에 파일을 만들면, Nuxt가 이들을 자동으로 불러와 사용할 수 있도록 설정해 줍니다. Nuxt의 Composable은 자동으로 인식되기 때문에 import 경로를 직접 지정할 필요가 없어 더 편리하게 사용할 수 있습니다.

Composable 활용 예