Intro
๊ธฐ์กด, ๊ทธ๋ฌ๋๊น Vue2์์๋ ์ฝ๋๋ฅผ ์ฌ์ฌ์ฉํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ผ๋ก Mixin(๋ฏน์ค์ธ)์ ํ์ฉํ์ต๋๋ค. Vue3๋ก ๋์ด์ค๋ฉด์ Mixin์ ๋์ฒดํ๋ Composables์ด ์๊ฒผ์ต๋๋ค. Vue3 ๊ณต์ ๋ฌธ์์์๋ Mixin ๋์ Composables๋ฅผ ์ฌ์ฉํ๊ธฐ๋ฅผ ์ถ์ฒํ๊ณ ์์ต๋๋ค.
ํ์ง๋ง ์๊ฐ๋ณด๋ค Composables๋ฅผ ์๊ฐํด์ฃผ๋ ๋ฌธ์(ํน์ ๊ธ)๊ฐ ํ๊ตญ์ด๋ก ๋ ๊ฑด ์๋๊ตฐ์. ์์ง Vue3๋ ํ๊ตญ์์ ์ฌ์ฉํ์๋ ๋ถ๋ค์ด ์กฐ๊ธ ์ ์ ๊ฒ ์๋๊ฐ ์ถ๋ค์.
์ด์จ๋ ๊ณต์ ๋ฌธ์๋ฅผ ์์ฝํ๋ ๊ธ์ด๊ฒ ์ง๋ง Composables์ ๋ํด์ ์ฃผ์ ๋ฆฌ์ฃผ์ ๋ฆฌ ๋ ๋ค์ด๋ณด๊ฒ ์ต๋๋ค
Result
// App.vue
<script setup>
import {useMouse} from '@/composables/mouse';
...
const { x, y } = useMouse();
...
</script>
<template>
<div>
Mouse position is at: {{ x }}, {{ y }}
</div>
...
</template>
// mouse.js
import {onMounted, onUnmounted, ref} from 'vue';
...
export function useMouse() {
const x = ref(0)
const y = ref(0)
function update(event) {
x.value = event.pageX
y.value = event.pageY
}
...
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.addEventListener('mousemove', update))
return { x, y }
}
๋ ๊ฐ์ ์คํฌ๋ฆฝํธ ์ค ์๋์ชฝ์ธ mouse.js๊ฐ Composables์ ๊ตฌํ์ฒด์ ๋๋ค.
Composables๋ function์ export ํ๋ ๊ฒ์์ ์์ํฉ๋๋ค.(export default๋ฅผ ์ฌ์ฉํ์ ๋ ์๊ด์์ต๋๋ค.) ES6์ ์ต์ํ์ ๋ถ๋ค์ด๋ผ๋ฉด ํน๋ณํ ๊ฒ ์๋ ๋ชจ์ต์ด์ฃ .
composables function(mouse.js)์ ref๋ก ์์ฑ๋ ๋ณ์, x์ y๋ฅผ return ํด์ค๋๋ค. App.vue์์๋ composable function์ ์คํํด x์ y๋ฅผ return ๋ฐ์ ์ํ๋ ์ฉ๋๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค. ์ด๋ ref์ ๋ฐ์์ฑ์ ์ฌ๋ผ์ง์ง ์๊ณ ์ ์ง๋ฉ๋๋ค.
์ ์ฒด ์์ค ์ฝ๋๋ ์ด๊ณณ์์ ํ์ธ ๊ฐ๋ฅํ์ญ๋๋ค.
์ฃผ์ ๋ฆฌ์ฃผ์ ๋ฆฌ
Result์์ ๋ณด์ฌ๋๋ฆฐ ์์ ๋ Composables๋ฅผ ์๊ฐํด์ฃผ๋ Vue3์ ๊ณต์ ๋ฌธ์ ๊ฐ์ฅ ์๋จ์ ์๋ ๊ธฐ๋ณธ ์์ ์ ๋๋ค. ๋ค๋ฅธ ์์ ํ๋๋ง ๋ ์ฃผ์ ๋ฆฌ์ฃผ์ ๋ฆฌ ๋ ๋ค์ด๋ณด๊ฒ ์ต๋๋ค.
composables function์ ๋ค๋ฅธ composables function๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
// mouse.js
import {useEventListener} from '@/composables/event';
export function useMouse() {
const x = ref(0)
const y = ref(0)
function update(event) {
x.value = event.pageX
y.value = event.pageY
}
useEventListener(window, 'mousemove', update)
// onMounted(() => window.addEventListener('mousemove', update))
// onUnmounted(() => window.addEventListener('mousemove', update))
return { x, y }
}
// event.js
import {onMounted, onUnmounted} from 'vue';
export function useEventListener(target, event, callback) {
onMounted(() => target.addEventListener(event, callback))
onUnmounted(() => target.addEventListener(event, callback))
}
๊ธฐ์กด mouse composables function์์ window ๊ฐ์ฒด์ ์ด๋ฒคํธ๋ฅผ ์ฐ๊ฒฐํ๋ ๋ถ๋ถ์ event.js๋ผ๋ ์๋ก์ด composables function์ ์ด์ฉํด์ ํ์ด๋ธ ๋ชจ์ต์ ๋๋ค.
์ ๊ฐ ์๊ฐํด๋๋ฆฐ ์์ ์ด์ธ์๋ ๊ณต์ ๋ฌธ์์์๋ ๋น๋๊ธฐ ์ํ์ ๋ํ ์์ (fetch๋ฅผ composables function์ผ๋ก ๋ง๋ ์์ )์ composables function์์ unref์ reactive๋ฅผ ํ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํด์ ์ค๋ช ํด์ฃผ๊ณ ์์ต๋๋ค. ๊ถ๊ธํ์ ๋ถ์ ์๋ ๋งํฌ๋ก ๋ค์ด๊ฐ์ ํ์ธํ์๋ฉด ๋ ๊ฒ ๊ฐ์ต๋๋ค.
https://vuejs.org/guide/reusability/composables.html
๊ธ ์ฝ์ด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.
๋๊ธ