🏗️ 컴포넌트 내 데이터 로직 분리: 컴포저블 사용하기

지금까지 만든 pages/users.vue 파일의 <script setup> 블록에는 useFetch를 포함한 데이터 로직이 들어 있습니다. 이대로 두면 다른 페이지에서 동일한 사용자 목록이 필요할 때마다 코드를 복사해야 합니다.

Nuxt는 이러한 재사용 가능한 로직을 관리하기 위해 composables/ 디렉토리를 제공합니다. 이를 활용하여 데이터 로직을 분리하는 실습을 해봅시다.

---

1. 🧩 컴포저블(Composable)의 역할과 장점

컴포저블은 Vue 3에서 도입된 개념으로, 컴포넌트 간에 상태 저장 로직을 공유하고 재사용하기 위해 설계된 함수입니다. Nuxt 환경에서 컴포저블을 사용하면 다음과 같은 장점이 있습니다.

• 자동 임포트: composables/ 폴더에 파일을 생성하면, components/와 마찬가지로 별도의 import 없이 앱 어디서든 바로 함수를 호출할 수 있습니다.
• 코드 분리: UI(템플릿)와 데이터 로직(Fetching, 계산 등)을 깔끔하게 분리하여 가독성을 높입니다.
• 데이터 공유: useFetch와 결합하여 여러 컴포넌트가 동일한 데이터를 공유하도록 쉽게 설정할 수 있습니다.

---

2. 👩‍💻 실습 1: useFetch 로직을 컴포저블로 분리

이전에 pages/users.vue에 있던 useFetch 로직을 새로운 컴포저블 함수로 옮겨봅시다.

1. 컴포저블 파일 생성: 프로젝트 루트에 composables 폴더를 만들고, 그 안에 useUsers.js 파일을 생성합니다. (파일명은 use로 시작하는 것이 관례입니다.)

   // composables/useUsers.js
   
   // 외부에 노출할 함수는 export 합니다.
   export const useUsers = () => {
     // 1. 기존 users.vue에서 사용하던 useFetch 로직을 그대로 가져옵니다.
     // 2. key 옵션을 추가하여 Nuxt가 이 데이터를 캐싱하고 공유하도록 합니다.
     const { data, pending, error } = useFetch(
       'https://jsonplaceholder.typicode.com/users', 
       { key: 'all-users-list' } // 고유 키 지정
     );
   
     // 3. 템플릿에서 필요한 반응형 변수들을 반환합니다.
     return { data, pending, error };
   }
   

---

3. 실습 2: 페이지에서 컴포저블 사용하기

이제 pages/users.vue 파일을 열어 복잡했던 useFetch 코드를 제거하고, 방금 만든 useUsers 컴포저블을 호출하도록 수정합니다.

1. pages/users.vue의 <script setup> 블록을 다음과 같이 수정합니다.

   // pages/users.vue 스크립트 부분 (수정)
   <script setup>
   // 복잡했던 useFetch 코드가 사라지고, useUsers()만 남습니다.
   // Nuxt의 자동 임포트 덕분에 import 구문이 필요 없습니다.
   const { data, pending, error } = useUsers(); 
   
   // 참고: 템플릿(HTML) 코드는 수정할 필요가 전혀 없습니다!
   // data, pending, error 변수 이름이 동일하기 때문입니다.
   </script>
   

결과: 코드는 훨씬 간결해졌지만, 브라우저에서 http://localhost:3000/users 페이지를 확인하면 기능은 이전과 완벽하게 동일하게 작동합니다.

4. 🔗 데이터 공유의 이점 강조 (Key 옵션)

useUsers 컴포저블에서 useFetch에 { key: 'all-users-list' } 옵션을 추가한 것을 기억하세요.

• 핵심 기능: 이 고유 키 덕분에, 만약 다른 컴포넌트(예: components/UserWidget.vue)에서 또 다시 useUsers()를 호출하면, Nuxt는 API를 다시 호출하지 않고 이미 가져온 데이터를 공유합니다.
• 성능 향상: 이는 API 호출 횟수를 줄여주고, 서버 및 클라이언트 간의 데이터 Hydration 과정을 최적화하여 애플리케이션의 성능을 향상시킵니다.

---

📝 블로그 마무리: 깨끗하고 효율적인 코드

이번 시간에는 composables/ 폴더를 활용하여 데이터 로직을 분리하는 Nuxt 개발의 모범 사례를 익혔습니다. 이는 코드를 모듈화하고 재사용성을 높여 대규모 프로젝트 관리를 용이하게 합니다.