[번역] Vue3 Coding Better Composables : 옵션 객체 파라미터 활용하여 컴포저블 잘 만들기

컴포저블을 잘 활용하여 클린한 Vue3 코드를 작성해 봅시다.

해당 게시물에서는 파라미터를 잘 설계하는 방법을 다룹니다.

컴포저블이란?

• 상태 저장 로직을 캡슐화하고 재사용하기 위해 Vue Composition API를 활용하는 함수
  • 모든 반응성이 필요한 코드 <==> 컴포저블
• Vue 3 앱에서 비즈니스 로직을 합성하는 가장 좋은 방법
• 작은 코드 조각을 함수로 추출하여 반복적으로 쉽게 재사용
  • 코드를 쉽게 작성할 수 있음
  • 코드를 읽기 쉬움

---

옵션 객체 파라미터

• 대부분의 컴포저블에는 하나 또는 두 개의 필수 입력이 있습니다.
• 그런 다음 컴포저블 동작 방식을 설정하는 데 도움이 되는 일련의 선택적 인수가 있습니다.

컴포저블을 구성할 때 긴 인수 목록을 전달하는 대신 옵션 객체를 전달할 수 있습니다.

// Using an options object
const title = useTitle('A new title', { titleTemplate: '>> %s <<' });
// Title is now ">> A new title <<"

// Using more arguments
const title = useTitle('A new title', '>> %s <<');
// Title is now ">> A new title <<"

인수 대신 옵션을 전체 개체로 전달하면 다음과 같은 몇 가지 이점이 있습니다.

• 인수 순서를 기억할 필요가 없습니다.
• 옵션 필드가 무슨 역할을 하는지 알기 때문에 코드 읽기가 쉽습니다.
• 새 옵션을 추가하기 쉽습니다.
  • 컨슈머 및 프로바이더 양쪽 다

---

옵션 객체를 파라미터로 하는 컴포저블 구현

export function useMouse(options) {
  const {
    asArray = false,
    throttle = false,
  } = options;

  // ...
};

1. 필수 인자는 순서 있는 파라미터로 전달받음
2. 마지막 인자는 옵션 객체임
   • 선택적
3. 옵션을 구조분해

---

옵션 객체를 파라미터로 하는 컴포저블 : 예제

VueUse 라이브러리의 훅 참고

useTitle

첫번째 인자 초기값은 필수, 선택적  option 객체

useTitle

const title = useTitle('Initial Page Title', {
  titleTemplate: '>> %s <<',
  observe: true,
});

observe를 켜면 document.title이 바뀔 때마다 컴포저블의 값을 바꿔줌

useRefHistory

첫번째 인자 초기값은 필수, 선택적 option 객체

useRefHistory

const state = ref({});
const { undo, redo } = useRefHistory(state, {
  deep: true,    // Track changes inside of objects and arrays
  capacity: 15,  // Limit how many steps we track
});

컴포저블 내부에서 다른 컴포저블을 활용할 수 있음(전체 코드)

export function useRefHistory(source, options) {
  const {
    deep = false,
    flush = 'pre',
    eventFilter,
  } = options;
 
  // ...
}

// useRefHistory 내부

const manualHistory = useManualRefHistory(
  source,
  {
    // Pass along the options object to another composable
    ...options,
    clone: options.clone || deep,
    setSource,
  },
);

// ...

컴포저블은 다른 컴포저블을 사용할 수 있음을 보여줍니다.

참고

https://www.vuemastery.com/blog/coding-better-composables-1-of-5/

Coding Better Composables (1/5) | Vue Mastery