[번역] Vue3 Coding Better Composables : 다형적인 리턴값을 활용하여 컴포저블 잘만들기

컴포저블의 리턴 값을 좀 더 유용하게 만드는 방법을 알아봅니다.

해당 글을 번역 및 요약한 글입니다.

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

Coding Better Composables: Dynamic Returns (3/5) | Vue Mastery

이전 시리즈도 참고하세요

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

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

2022.12.08 - [Vue.js] - [번역] Vue3 Coding Better Composables : ref 및 unref를 사용하여 유연한 컴포저블 만들기

[번역] Vue3 Coding Better Composables : ref 및 unref를 사용하여 유연한 컴포저블 만들기

---

동적 리턴값 패턴

컴포저블은 단일 값 또는 객체를 반환할 수 있습니다.

// Returns a single value
const isDark = useDark();

// Returns an object of values
const {
  counter,
  pause,
  resume,
} = useInterval(1000, { controls: true });

이것은 복잡성 수준을 제어할 수 있기 때문에 좋은 기능입니다.

• 간단한 값이 필요하면 primitive를 리턴합니다
• 좀 더 복잡한 값이 필요하면 객체를 리턴합니다.

useInterval을 사용할 때 대부분 카운터만 필요합니다. 따라서 대부분 넘버를 반환합니다.

// Default behaviour
const counter = useInterval(1000);

// 1...
// 2...
// 3...

그러나 카운터를 일시 중지하고 다시 시작하려는 경우,
리턴값에 제어 옵션을 추가할 수 있습니다.

그러나 카운터를 일시 중지하고 다시 시작하려는 경우에도 그렇게 하도록 할 수 있습니다. 제어 옵션을 추가하여 이 작업을 수행할 수 있습니다.

이제 컴포저블에서 이 동적 반환 값 패턴을 어떻게 사용할 수 있는지 살펴보겠습니다.

---

동적 반환 값 컴포넌트 구현하기

이 패턴을 구현하려면 다음 두 가지 작업을 수행해야 합니다.

1. 파라미터 옵션 객체에 옵션 필드를 추가합니다.
2. 해당 옵션을 사용하여 return 문의 동작을 변경합니다.

export default useComposable(input, options) {
  // 1. Add in the `controls` option
  const { controls = false } = options;
  
  // ...

  // 2. Either return a single value or an object
  if (controls) {
    return { singleValue, anotherValue, andAnother };
  } else {
    return singleValue;
  }
}

옵션이 없는 경우 하나의 값만 리턴합니다.

좀 더 복잡한 제어가 필요할 경우 객체를 리턴합니다.

 

VueUse라이브러리의 리얼 월드 예제를 봅시다.

---

useInterval

useInterval이 어떻게 구현되었는지 볼까요?

아래와 같이 인터벌 만을 파라미터로 받을 수도 있습니다.

// Updates `counter` every 500 milliseconds
const counter = useInterval(500);

소스 코드 최상단(the very top)에서 파라미터 옵션 객체를 구조분해하며,

디폴트를 컨트롤 미사용으로 설정합니다.

const {
  controls: exposeControls = false,
  immediate = true,
} = options;

그리고 소스 코드 마지막 부분(at the end)에서,

기본값(false)일 경우 카운터 ref,

아닐 경우 카운터 ref와 모든 컨트롤을 반환합니다.

if (exposeControls) {
  return {
    counter,
    ...controls,
  };
else {
  return counter;
}

---

useNow

 

useNow컴포저블을 사용하면 지금을 나타내는 Date 객체를 가져와 반응적으로 업데이트할 수 있습니다.

const now = useNow();

• 디폴트로 프레임마다 새로고침됩니다(일반적으로 초당 60회).
  • ref만 리턴하여 해당 값을 통해 뷰를 업데이트 할 수 있도록 합니다.
• 업데이트 빈도를 변경할 수 있지만 업데이트 프로세스를 일시 중지(pause)하고 재개(resume)할 수도 있습니다.
  • 컨트롤 옵션을 opt-in하는 경우, 참조와 컨트롤을 포함한 객체를 리턴합니다.

const { now, pause, resume } = useNow({ controls: true });

이 컴포저블은 useInterval 컴포저블과 매우 유사한 방식으로 동작합니다.

(자세한 설명은 생략)

 

이와 비슷한 방식으로 옵션이 있을 경우 좀 더 자세한 리턴값을 갖는 컴포저블 리스트 입니다.

• useInterval
• useTimeout
• useNow
• useTimestamp
• useTimeAgo

---

요약

컴포저블 API 디자인 시

• 좀 더 상세한 컨트롤이 필요할 경우, 객체를 리턴합니다.
• 리턴값이 복잡할 필요가 없는 경우, ref나 네이티브 js 값을 리턴합니다.