Vue 프로젝트의 단짝, VueUse

VueUse

왜 사용해야 하는가?

• Vue 2 & 3 지원 (Vue 2의 경우 일부 기능 미지원)
• CSS 애니메이션, 브라우저, 컴포넌트 등의 유용한 헬퍼를 Use 함수로 제공
• Composition API 사용으로 금방 친숙 (당연하겠지만 Options API 및 Composition API 모두 사용 가능)
• 큰 커뮤니티, 검증된 함수

리액트 Hooks가 즐겁다? 그러면 마참내 react-use 도 즐겁다!

설치하기

npm i @vueuse/core
# 또는
yarn add @vueuse/core
# pnpm 쓰고싶다...

UMD 사용 시

<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

주요 함수

• useTransition: CSS 트랜지션 생성에 도움을 준다.
• useActiveElement - document.activeElement 의 반응성 추가!
• useClipboard: 반응성이 생신 클립보드 API
• useFetch: Fetch API에 반응성이 무슨 의미가 있나고? 이 함수를 통해 URL을 ref 함수로 초기화해서 넣기만 하면 URL 값이 바뀔 때마다 내용도 바뀐다!
• useTitle: 문서 제목을 동적으로 바꾸면서 Vue스럽게 원한다면 이만한 놈이 없다.
• templateRef: Composition API 에서 ref 지정한 요소를 가져오기엔 뭔가 좀 이상하다.. 하지만 이걸 쓰면 기존 ref 요소를 ref 함수 쓰듯이 쓸 수 있다.
• useWebSocket: 웹소켓을 Vue 컴포넌트에 연결하는 엘레강스한 방법.
• onClickOutside: 컴포넌트 요소 밖으로 마우스 클릭을 감지해서 대응하는 손쉬운 방법!
• useParallax: 입체적인 효과를 반응형으로 즐기고 싶다면 이 함수가 손쉽게 수치를 제공해 준다.
• useStorage: LocalStorage/SessionStorage 내 지정된 값을 반응형으로? JSON 객체도 알아서 직렬화 및 해석도 해준다!
• asyncComputed: 기본적으로 computed 함수는 비동기를 지원하지 않는다. (왠만한 반응형 함수 마찬가지로 비동기 미지원) 비동기가 필요하다면 이걸 쓰면 된다.
• useDebounce: 자주 바뀔 때, 일정 간격 이후 반응해서 안정적인 컴포넌트 새로고침이 필요하다면 이걸 쓰면 된다.
• useThrottle: 자주 바뀔 때, 일정 간격 마다 반응해서 안정적인 컴포넌트 새로고침이 필요하다면 이걸 쓰면 된다.
• useRefHistory: 반응형 데이터 + undo + redo 기능까지 한 번에? 세상에나!

확장

이들은 추가 설치가 필요하다.

• Electron npm i @vueuse/electron
  • useIpcRenderer
• Firebase npm i @vueuse/firebase
  • useFirestore
• Integrations npm i @vueuse/integrations
  • useAxios - axios 를 통해 데이터를 가져왔다면 반응형으로 부드럽게!
  • useJwt jwt-decode 모듈을 통해 반응형 JWT 토큰 내 payload 데이터도 반응형으로!
• Vue Router 4 npm i @vueuse/router (Vue 3 전용)
  • useRouteQuery - URL 뒤에 물음표로 시작하는 질의 키/값을 반응형으로 가져올 수 있다.
• RxJS npm i @vueuse/rxjs