Composable 함수

📌 컴포저블 함수

- 🌟 Composition API 기반으로 작성된 재사용 가능한 함수이다.

- 상태 관리가 필요한 경우가 많지만, 반드시 필수는 아니다.

- 이름은 보통 useXXX로 작성해 가독성과 목적을 명확히 한다.

 

◾ 반응형 상태 중심의 컴포저블

• ref, reactive, computed, watch 같은 Composition API 기능을 활용해 반응형 상태나 로직을 캡슐화한다.
• 상태를 관리하고 컴포넌트에서 상태 변화에 따라 UI가 갱신한다.
• ex) useCounter() 같은 상태 관리 함수

◾ 부수 효과 (Side Effect) 중심의 컴포저블

• onMounted, onUnmounted, API 호출, 이벤트 리스너 등록 등 Vue의 생명주기나 외부 효과 관리(Side effect)한다.
• 반응형 상태는 필요 없지만 Vue Composition API 문법으로 작성한다.
• ex) useFetchData() 같은 비동기 데이터 가져오기

❗ defineNuxtPlugin을 활용하여 전역 Composable 등록 가능

=> Nuxt 3에서 composables 폴더에 useXXX.ts 형태로 Composable 함수를 만들면 자동으로 가져와서 사용할 수 있다.

 

📌 일반적인 공통 유틸 함수

- 단순한 로직을 재사용한다.

- 일반 값(문자열, 숫자, 객체 등)을 반환한다.

- Vue의 라이프사이클을 사용하지 않는다.

- 상태 관리가 불가능하다.

- ex) createRandomId(), formatDate()