Composables

Composable?

• Vue Compositon API를 활용하여 상태 저장 비즈니스 로직을 캡슐화하고 재사용하는 기능
• Input, Output 외에도 변경되는 상태 관리를 포함한다.

Conventions & Best Practices

Naming

Composable 함수는 use로 시작되는 camelCase 이름으로 짓는다.

Input Args

Composable 함수는 반응성에 의존하지 않아도 ref 파라미터를 인풋으로 받아 올 수 있다. 그렇기 때문에 코드를 공유하는 환경에서는 입력 파라미터가 ref 인 케이스를 처리하는 것이 좋다.

Utilities function 인 unref()를 사용하면 편리하다.

import {unref} from 'vue'

const useMyFeature = (maybeRef) => {
	// IF maybeRef === typeof ref -> 해당 ref의 .value가 반환
	// ELSE maybeRef는 있는 그대로 반환된다.
	const value = unref(maybeRef)
	return value
}

입력값이 ref일 경우 reactivity 효과가 있는 Composable 함수를 생성하는 경우, watch()로 ref를 명시적으로 감시하는지 확인해야 한다. 또는, watchEffect() 내부에서 unref()를 호출하여 제대로 추적되어 반영되고 있는지 확인해야 한다.

Return Values

Composable 함수에서는 reactive() 대신 ref()를 독점적으로 사용한다. Vue에서 권장되는 컨벤션은 컴포넌트에서 구조분해할당으로 재할당 받을 수 있도록 Composable 함수에서 ref 객체를 반환하는 것이다.

const {lat, lon} = useGeolocation()

Composable에서 reactive 객체를 반환하면 구조분해할당 시 내부 상태에 대한 반응성 연결이 끊어지고, refs로 반환한다면 해당 반응성 연결이 유지된다.

Composable에서 반환된 상태를 객체 속성으로 사용하려는 경우, 반환된 객체를 reactive 맵핑한다.

const myLocation = reactive(useGeolocation())
console.log(myLocation.lat) // myLocation.lat은 원본 참조에 연결되어 있다.