์ด Composition API๋ Vue2 ๊ตฌ์กฐ๋ฅผ ๋ถ๊ดด์ํค๋ API๋ผ๊ณ ํฉ๋๋ค. ์ฝ๊ฐ ํ์ฌ Vue 3๊ฐ ๋์จ์ง ์ผ๋ง ์ ์ง๋ ์ํฉ์์ Compositiion API์ Vue 2๋ฅผ ๋ฒ๊ฐ์๊ฐ๋ฉด์ ์ฝ๋๋ฅผ ์์ฑํ ๊ฒฝ์ฐ ๋งค์ฐ ํฐ ํผ๋์ ์ผ๊ธฐ์ํฌ ์ ์๋ค๊ณ ํด์.
์ฆ Composition API๋ฅผ ์ดํดํ๋ ๊ฒ์ ๊ธฐ์กด์ Vue 2๊ฐ ๊ฐ๊ณ ์๋ ๊ฐ์ฒด ๊ธฐ๋ฐ์ ์ต์ ํํ๋ฅผ ์ ๋ถ ๋ค ๋ถ์ธํ๋ ๊ฒ์ธ๋ฐ, ์ ์ด์ Vue 3๋ฅผ ๊น๊ฒ ๊ณต๋ถํ๋ ค๋ ์ฌ๋๋ค๋ง ์ง์งํ๊ฒ ๊ณต๋ถํ๋๊ฒ ๋ซ๋ค๊ณ ํฉ๋๋ค. (์ ์ข ๊ณต๋ถ์ข ํด์ผ๊ฒ ๋ค์..ใ ใ )
๊ทธ๋ฆฌ๊ณ ๋ง์ ์ฌ๋๋ค์ด ๊ถ๊ธํดํ ์ ์๋ data: { return { } }
๊ตฌ์กฐ๋ฅผ ์ ๋ฒ๋ฆฌ๊ณ setup ( ) { }
๊ตฌ์กฐ๋ก ๋ฐ๋์๋์ง์ ๋ํด์๋ Evan You(Vue์ ์ฐฝ์์)๊ฐ ๋ต๋ณํ ๊ฒ์ด ์์ด์. ํด๋น ๋งํฌ์ธ github issue์ ๋ต๋ณ์ ๋ฐ๋ฅด๋ฉด ๊ฐ๋ฐ์๋ค์ด Vue 2 API๋ฅผ ์ฌ์ฉํ๋๊ฒ ์๋นํ ๋ฒ๊ฑฐ๋กญ๋ค๊ณ ์ด์ผ๊ธฐ ํ๊ธฐ ๋๋ฌธ์ด๋ผ๊ณ ํด์. ๊ทธ๋์ ์ข ๋ ์ฝ๊ฒ ํ ์ ์๋? ํด์ ๋ ์ด์ ์ง์ง ๋ณํด๋ณผ๊น?
ํ๋๋ฐ, Vue 2 ๊ตฌ์กฐ์ ์์ ํ ๊ผฌ์ฌ๋ฒ๋ฆฐ ๊ดด๋ฌผ?
๋ก ํ์ํ๊ฒ Composition API์ด๊ณ ์ด Composition API์ Vue 2์ ๊ฐ์ฒด ๊ธฐ๋ฐ ์ต์
๋ค์ด ํ ๋ฒ์ ์์ฌ์๋ ์ํฉ์ด๋ ๊ฐ๋ฐ์๋ค ์
์ฅ์์ ๋์ฑ ๋๊ฐํ ๊ฒ ๊ฐ์์. Vue 3๋ฅผ ์ค๋ช
ํ ์ฌ๋๋ค ์ค์๋ ๋ง์ด๊ทธ๋ ์ด์
๊ฐ์ด๋์ ์ด๋ฌํ ๊ฒฝ๊ณ ๋ผ๋ ํด์คฌ์ผ๋ฉด ์ข๊ฒ ๋ค๊ณ ์ด์ผ๊ธฐ ํ๋๋ฐ, ์๋ฌด๋๋ Vue 3๊ฐ Vue 2๋ ๋ฌ๋ผ์ง๊ฒ ์๊ฐ๋ณด๋ค ๋ง์์ ๋ง์ ๊ฐ๋ฐ์๋ค์ด ์ฒ์์ ํผ๋์ ๊ฒช์์ง ์์์๊น์?.
๊ทธ๋์ ๋ค๋ฅธ ์ด์ผ๊ธฐ์ง๋ง, ๋ง์ฝ์ ํ์ฌ ํ๋ก์ ํธ๋ฅผ Vue 2๋ก ์งํํด์ผ ํ๋ค๋ฉด, Composition API๋ฅผ ์๊ณ ๊ฐ์ง ์๊ธธ ๋ฐ๋๋ค๊ณ ํฉ๋๋ค...
๊ทธ๋ฆฌ๊ณ ๋ง์ฝ์ Vue 3๋ก Composition API๋ฅผ ์ฌ์ฉํ๋ค๋ฉด, ์ ๋ Vue 2 ๊ธฐ๋ฐ์ ์ค์ ์ ์์์ผ๋ฉด ํ๋ค๊ณ ํฉ๋๋ค...
๋ค ๊ผฌ์ฌ๋ฒ๋ฆฐ๋ค๊ณ ํฉ๋๋ค. ์ง์ฅ์ ๋ง๋ณผ๊ฑฐ๋ผ๋ค์๐ฑ๐ฑ๐ฑ๐ฑ
๋ณธ๋ก ์ผ๋ก ๋์ด๊ฐ์ Composition API๋ ์ด๋ฒ Vue 3์ ์ฒ์์ผ๋ก ๋์
๋๋ ํํ์ด๋ฉฐ ์ปดํฌ๋ํธ ๋ด์ setup์ผ๋ก ๊ตฌ์ฑํ๊ฒ ๋์. setup์ ์ปดํฌ๋ํธ๊ฐ ๋ฐ์ Props
์ Context
(์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ฑํ๋ Attribute
์ Slots
๊ทธ๋ฆฌ๊ณ Emit
)๋ฅผ ์ ๋ฌ๋ฐ์ ์ ์๊ณ ํด๋น ๋ถ๋ถ์ด ๊ถ๊ธํ์๋ฉด ํด๋ฆญํ์ธ์ฉ. ๊ณต์๋ฌธ์์์ Vue 2 โ Vue 3
์ ๋ณํ๋ ์ ์ ๋์ฑ ์์ธํ ์ ์ ์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ๋๋์ด ์ setup ์์์ Reactivity API์ด ํฌํจ๋์ด ์์ฑํด์ผ ํ๋์ง ์์๋ณด๊ฒ ์ต๋๋ค.
์ ๊ธฐํ๊ฒ Vue 3 ๊ตฌ์กฐ์์ Composition API๋ฅผ ๋ด๋นํ๋ setup์ ์ปดํฌ๋ํธ๊ฐ ์์ฑ๋๊ธฐ ์ ์ ์คํ๋ฉ๋๋ค. ๊ฐ์ฅ ๋จผ์ ์์ฑ๋์์ผ๋๊น. this
์ ๊ฐ์ ํํ๋ก ๋ฐ์ดํฐ ์ฐธ์กฐ๋ฅผ ํ ์ ์๋ค๊ณ ํฉ๋๋ค. ์ ์ด์ setup ์์ฑ ์ดํ์ ์ฒ๋ฆฌ๋ ์ปดํฌ๋ํธ์ data, methods, computed, watch
์ ๋ํ ๋ด์ฉ์ ๊ฐ์ ธ์ฌ ์ ์๋ค๊ณ ํด์. ์๋๋ฉด setup์์ฑํ ๋๋ component๊ฐ ์์ฑ๋์ง๊ฐ ์์์ ์ ๊ฒ๋ค์ด ์๊ฑฐ๋ ์..ใ
ใ
์๊ฐํด๋ณด๋ฉด ์ฐ๋ฆฌ๊ฐ ๋ฐฐ์ ๋ Vue 2๋ export default{ ... }
์์ data, computed, methods, watch
๋ฅผ ํ๋ํ๋ ์์ฑํ๋ ๊ฒ์ ๊ธฐ์ตํ์ค๊ฒ๋๋ค. ์ด ๊ตฌ์กฐ๋ component
๊ฐ ์์ฑ๋ ์ดํ์ ์ฒ๋ฆฌ๋๋ ๊ตฌ์กฐ๋๊น this
๋ก ์ ๊ทผ(์ฐ์ ์์๊ฐ ๋ฎ๊ธฐ ๋๋ฌธ์)ํด์ ํ๋ํ๋ ์ฒ๋ฆฌํด์ค ์ ์์๋๋ฐ, ์ด๊ฒ Vue 3์ setup
์ผ๋ก ๋ฐ๋๋ฉด์ ์ปดํฌ๋ํธ๋ณด๋ค ๋จผ์ setup
์ด ์์ฑ๋๋๊ฑฐ์ฃ . ๊ทธ๋ฌ๋๊น ์ฐ๋ฆฌ์๊ฒ ์ต์ํ data, computed, methods, created, watch
๋ฅผ ์ฌ์ฉํ๊ฒ ๋๋ฉด, Vue 3๊ฐ ์ธ์์ ๋ชปํ๋ค๋ ์ด์ผ๊ธฐ์ธ๊ฑฐ ๊ฐ์ต๋๋ค. ์ฌ์ค Vue 3 ๊ณต์๋ฌธ์๋ฅผ ๋ณด๋ฉด์ ์ ๊ณ์ ๐ก โ ์ด ํ์ ์ด์๊ฑฐ๋ ์. ์ด๋ค ์ปดํฌ๋ํธ๋ Vue 2, ์ด๋ค ์ปดํฌ๋ํธ๋ Vue 3๋ก ์์ฑํ๋ฉด ๋ ํท๊ฐ๋ฆฌ๊ณ ์ดํด๊ฐ ์๊ฐ๋๊ตฐ์.
์๋ก ๋ค๋ฅธ ์ปดํฌ๋ํธ์์ ๋ฒ์ ์ ๋ค๋ฅด๊ฒ ์ฝ๋๋ฅผ ์์ฑํ์ ๋๋ ํ๋ค์ด ํ๋๋ฐ, ํ ์ปดํฌ๋ํธ ๋ด์์ ์ฐ๋ฆฌ์๊ฒ ์ต์ํ Vue 2 ๊ตฌ์กฐ์ Vue 3์ Composition API๋ฅผ ์ฌ์ฉํ๋ฉด ์ง์ง ์ง์ฅ์ด๊ตฌ๋ ๋ผ๊ณ ๋ณด์๋ฉด ๋๊ฒ ์ต๋๋ค.
Vue 2์ ์์ ํ ๊ผฌ์ฌ๋ฒ๋ฆฐ ๊ดด๋ฌผ = Composition API
๊ทธ๋์ Composition API๋ฅผ ์ด์ฉํ ๊ฒฝ์ฐ Vue 2 ์์ ์ฌ์ฉํ๋ ๋ค์ ํญ๋ชฉ๋ค์ setup ํจ์ ์์ ์์ฑํ๋ ๊ฒ์ผ๋ก ๋์ฒดํฉ๋๋ค.
Vue 2 ์์๋ ์์ ์ฝ๋๋ฅผ ์์ฑํ ๋ ์ค๊ดํธ๋ก ํ๋ํ๋ ์์ฑํ๋ฉด์ ๋ญํฑ์ด๋ก ๊ตฌ๋ถํ๋๋ฐ, Vue 3์์๋ ์ด๊ฑธ ์์ ๋ฒ๋ฆฌ๊ณ setup์์์๋ง ์์ฑํด์ ์ ์ง๋ณด์์ ์ฝ๋์ ๊ฐ๋
์ฑ์ ๋์ธ๊ฑฐ ๊ฐ์์(๊ฐ์ธ์ ์ผ๋ก ๊ทธ๋ ๊ฒ ์๊ฐํด์ ใ
ใ
). ๊ทธ๋ฆฌ๊ณ setup์์ return์ ์ฌ์ฉํด์ ๋ฐํ ๊ฐ์ฒด๋ฅผ ๋ด๋ณด๋ด๋ ๊ฒ๋ง์ผ๋ก Vue 3์ ์งํ๋ ์ ์ ํ์ธํ ์ ์์ฃ . ๊ทธ๋ฆฌ๊ณ ๋์ฑ ์ค์ํ๊ฑด setup ์์์ ์์ฑํ data๋ ์ด์ this
๋ก ์ ๊ทผํ์ง ์์ต๋๋ค. ์๋ํ๋ฉด ์ปดํฌ๋ํธ๊ฐ ์์ฑํ๊ธฐ ์ ์ setup์ด ์์ฑ๋์ด์ ์ฐ์ ์์๊ฐ ๋๊ธฐ ๋๋ฌธ์ this
์ฌ์ฉํ์ง ์๊ณ ์ ๊ทผํฉ๋๋ค.
๊ทธ๋ฆฌ๊ณ ์ด์ ์ด๋ฌํ API ๋๋ hook์ ๋ฌด์กฐ๊ฑด import
ํด์ผ ํฉ๋๋ค. Vue 2์์๋ ๊ทธ๋ฐ์ ์ด ์์ด์ ์ ๋ ์ฒ์์ ๋ง์ด ํผ๋์ค๋ฌ์ ์ต๋๋ค.
๋ค์ ์์ ์ฝ๋์ ๋๋ค.
<template>
<div>
<h1>์ถ์
๋ฌธ</h1>
<p>{{ welcomeMessage }}</p>
<button @click="leave">๋ ๋๊ธฐ</button>
</div>
</template>
<script>
import {
reactive, ref,
computed, watch,
onMounted
} from 'vue' // ์ธ ํญ๋ชฉ์ ๋ฏธ๋ฆฌ importํฉ๋๋ค.
export default {
// setup ์์ { attribute, slots, emit }์ ๊ฐ์ด ์์ฑํ ์ด์ ๋ context๋ฅผ ๊ฐ์ฒด ํํ๋ก ๋ฐ๊ธฐ ๋๋ฌธ์ธ๊ฑฐ ๊ฐ์ต๋๋ค.
// ์ ๋ ์ด๊ฑด ์ฐพ์๋ณด์ง ๋ชปํ์ด์.
setup (prop, { attribute, slots, emit }) {
const state = reactive({
name: 'Dooly',
visitCount: 0
}) // vue 3 ์์๋ ๋ฐ์ดํฐ๋ฅผ ํต์ ํ ๋ ์ด์ data๋ฅผ ์ฌ์ฉํ์ง ์๊ณ setup๋ด์์ vanilla js ์ฒ๋ผ ๊ทธ๋ฅ ๋ณ์๋ฅผ ์์ฑํฉ๋๋ค.
const leave = () => { // methods๋ ์ด๋ฐ ๋ฐฉ์์ผ๋ก ์ฌ์ฉํฉ๋๋ค.
state.visitCount = 0 // ๋ญ๊ฐ Vue 2 ๋ณด๋ค ๋ js ์ค๋ฌ์ด ๋๋์ด ๋ค์ง ์๋์?
}
// hook์ ํด๋นํ๋ ํญ๋ชฉ๋ค์ ์์์ ์ฌ์ ์ importํ๊ณ
// setup ์์ ์คํํจ์๋ฅผ ๋ฃ์ผ๋ฉด ํด๋น ํ
์กฐ๊ฑด์ ๋ง๊ฒ ์คํ๋์!
// ์ฐธ๊ณ ๋ก Vue 2 โ Vue 3 ๋ก ๋ณ๊ฒฝ๋๋ฉด์ ๋ฐ๋ ๋ผ์ดํ ์ฌ์ดํด์ ๊ณต์๋ฌธ์์์ ํ์ธํ์ค ์ ์์ด์!
// ๋ช
์นญ๊ณผ ์ฃผ๊ธฐ๊ฐ ์ข ๋ฐ๋๊ฒ ์์ต๋๋ค. Composition API ๋๋ฌธ์..
onMounted(() => {
console.log('component mounted!')
})
const welcomeMessage = computed(() => `${state.name}๋ ํ์ํฉ๋๋ค`)
watch(
() => state.visitCount,
(value, prev) => {
console.log(`${state.name}๋ ${value}ํ ๋ฐฉ๋ฌธ`)
}
)
// ํ์ํ ๋ฐ์ดํฐ๋ ๊ทธ๋ฅ ํ ๋ฒ์ return ํฉ๋๋ค.
// ์ด๊ฑด ์ ๋ง ํธํด์ง๋ฏ
return {
state,
leave,
welcomeMessage
}
}
}
</script>
์ด๋ ๊ฒ ๋ณด๋ Vue 2 ์ Vue 3์ ์ฐจ์ด์ ์ด ๋๊ปด์ง์์ง ์๋์??!! ์ ๋๊ปด์ง๋ฉด ์ด์ฉ ์ ์์ฃ ..ใ
๊ธฐ์กด Vue 2์ ๋ฌธ์ ์ ์ object ์์ ์๋ก์ด key๊ฐ์ ์ถ๊ฐํ๋ฉด ๋ฐ์ํ์ผ๋ก ์ธ์ํ์ง ์์๊ณ , array
์์ push
, slice
, shift
๋ฑ์ ์ด์ฉํด์ผ๋ง ์๋ก์ด ๋ฐฐ์ด๋ก ์ธ์ํ์ต๋๋ค. ๊ทธ๋์ ์ด๋ฌํ ๋ฐ์ดํฐ์ ๋ฐ์์ฑ์ ํด๊ฒฐํ๊ธฐ ์ํด ์๋ฐ์คํฌ๋ฆฝํธ์ Proxy API์ ๋น์ทํ ํํ์ API๋ฅผ ์ ์ํ์ต๋๋ค. ์ด๊ฒ์ด Reactivity API์ธ๋ฐ, ์ด๋ Javascript์์ ์ง์ํ๋ Proxy API์ ์์ ํ ๊ฐ์ ํํ๋ ์๋๋ผ๊ณ ํฉ๋๋ค.
์ด ๋ถ๋ถ๋ถํฐ ์ดํดํ๊ธฐ๊ฐ ๋๊ฐํ์ต๋๋ค. ์ ๊ทธ๋ฌ์ด์. ๊ทธ๋์ ๊ทธ๋ฅ ๋ฐ์ํ ๋ณ์ ์ฌ์ฉ๋ฒ์ด ๋ฐ๋์๊ตฌ๋ ๊ทธ๊ฒ Reactivity API๊ตฌ๋ ์๊ฐํ์ต๋๋ค.
๊ธฐ์ตํด์ผ ํ ๊ฒ์ reactive, ref, toRefs, readonly์ ๋๋ค.
reactive
: ๊ฐ์ฒด์ ๋ฐฐ์ด, set๊ณผ ๊ฐ์ ํํ์ ๋ฐ์ดํฐ๋ค์ ๋ด๋น.
ref
: ๋จ์๊ฐ(์ซ์, ๋ฌธ์์ด, ๋ณผ๋ฆฐ๊ณผ ๊ฐ์)์ ๋ด๋น.
toRefs
: Reactivity API๋ก ๊ฐ์ธ์ง ๊ฐ๋ค์ ์ผ๋ฐํํ๋ก ๋ณํํ๊ธฐ ์ํ ํจ์.
readonly
: ๋ช
์นญ ๊ทธ๋๋ก ๊ฐ์ ์ค๋ก์ง ์ฝ์ด์ผ ํ๋ ์ํฉ์ ์ง์ , Reactivity API๋ก ๊ฐ์ธ์ง ํญ๋ชฉ์ ๋ํด์๋ง ์๋.
์๋์ ์์ ๋ก ์ดํดํด ๋ณผ๊ฒ์ฉ
<template>
<div>
<p>count: {{ count }}</p>
<button @click="count++">count update</button>
<p>list: {{ list }}</p>
<button @click="updateList(list)">list push</button>
<p>readOnlyCount: {{ readOnlyCount }}</p>
<button @click="readOnlyCount++">readOnlyCount update</button>
<hr />
<p>failedCount: {{ failedCount }}</p>
<button @click="failedCount++">count update</button>
<p>failedList: {{ failedList }}</p>
<button @click="updateList(failedList)">list push</button>
</div>
</template>
<script>
import {ref, reactive, readonly} from 'vue'
export default {
setup () {
// ### ๋ฐ์ดํฐ ์์ฑ๋ถ๋ถ์
๋๋ค ###
const count = ref(0) // ๋จ์ ๊ฐ์ ref
const list = reactive([]) // ๋ฐฐ์ด์ด๋ฏ๋ก reactive
const readOnlyCount = readonly(count)
// ref๋ฅผ ์ด์ฉํ ๊ฐ์ readonly ์์ฑ์ ์ง์ ํ์ฌ ์๋ก์ด ๋ณ์๋ก ์ง์ .
// ์
๋ฐ์ดํธ๋ฅผ ํ๋ ค๊ณ ํด๋ ์
๋ฐ์ดํธ๊ฐ ๋์ง ์์ผ๋ฉฐ count๊ฐ ์ฌ๋ผ๊ฐ๋
// ์๋์ผ๋ก ์ฐธ์กฐ๋์ด ์
๋ฐ์ดํธ.
const failedCount = reactive(0)
// 0์ ๋จ์๊ฐ์ผ๋ก ์ง์ ํด์ผ ํ์ง๋ง, reactive๋ฅผ ์ฌ์ฉํ๋ค. ๊ฐ์ด ๋ฐ์๋์ง ์์ ๊ฒ.
// ์ด๊ฑด ๋ฐ์๋๋๊ตฐ์...? ์ ๊ทธ๋ด๊น์??
const failedList = ref([])
// ref์ ๋ฐฐ์ด []์ ์ฌ์ฉํ๋ค. ๋ฐ์๋์ง ์์ ๊ฒ. ์ด๊ฑด ๋ฐ์ ์ ๋๋๊ตฐ์
// ์ฌ์ค์ methods ์์ฑ ๋ถ๋ถ์
๋๋ค.
const updateList = (base) => {
base.push(Math.random())
}
// template์์ ์ฐธ์กฐํ ๋ฐ์ดํฐ๋ฅผ ๊ผญ!!!!! return ํด์ผํฉ๋๋ค.
return {
count,
list,
readOnlyCount,
failedCount,
failedList,
updateList
}
}
}
</script>
์๊ฐ๋ณด๋ค ํธํ๊ฒ ๋ฐ์ํ ๋ณ์๋ฅผ ๋ค๋ฃฐ ์ ์๋ค๋ ๊ฒ์ด ํฐ ์ฅ์ ์ผ๋ก ๋ฐ๋๊ฒ ๊ฐ์ต๋๋ค.
Provide
์ Inject
์
๋๋ค. ์ด๊ฑด ์ง๊ธ๊ป ์ฐ๋ฆฌ๊ฐ Vue 2์์ ์์ ์ปดํฌ๋ํธ์ Props
๋ฅผ ํ๋ ๋ถ๋ถ์ด ์งํ ์๊ฐํ์๋ฉด ๋๊ฒ ์ต๋๋น~ ์ฌ์ค provide์ inject๋ Vue 2์๋ ์์๋ ๋ด์ฉ์ผ๋ก ๊ธฐ์ตํฉ๋๋ค. ๊ณต์๋ฌธ์์์ ํ์ธํ ๊ธฐ์ต์ด...
Vue 2๋ฅผ ๋ฐฐ์ธ ๋, ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํด์ค ๋ ์ฐ๋ฆฌ๋ ํญ์ template์ import, component๋ฅผ ์ง์ ํด์ฃผ์์ฃ . main.vue๊ฐ ๋ถ๋ชจ๊ณ childComponent.vue๊ฐ ์์์ด๋ฉด ๋ค์๊ณผ ๊ฐ์ด ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํด์คฌ์ฃ . ๊ทผ๋ฐ ์ด๊ฑฐ ๊ผฌ์ด๋ฉด ์ฝ๋ ์์ ํ๊ธฐ๊ฐ ์ฐธ ๊ป๋๋ฌ์ ์ง์...
// main.vue ๋ถ๋ชจ
<template>
<ChildComponent :propkey="data"> <!-- ์ด๊ฑธ ์จ์ผ propkey๋ผ๋ ๋ช
์นญ์ผ๋ก data๊ฐ ๋์ด๊ฐ์ด์ -->
</ChildComponent>
</template>
<script>
import ChildComponent from './child-component.vue' // ๊ผญ import ํด์ค์ผํ๊ณ
export default {
components: {
ChildComponent // ์ปดํฌ๋ํธ ์
๋ ฅ!
}
}
</script>
// childComponent.vue ์์
<template>
<AnotherChild :values="this.propkey">
</AnotherChild>
</template>
<script>
import AnotherChild from './another-child.vue'
export default {
props: {
propkey: Object
},
components: {
AnotherChild
}
}
</script>
๋ถ๋ชจ โ ์์์ผ๋ก ๊ฐ๋ฉด ์ฐ๋ฆฌ๋ ์์ฐ์ค๋ props: { ... }
๋ฅผ ์ผ์ต๋๋ค. ๊ทผ๋ฐ ์ด๋ฐ ๊ด๊ณ๊ฐ ๋ง์ฝ์ ์์ฒญ ๋ง์์ ธ์ ๋ณต์กํด์ง๋ค๋ ์ํฉ์ ๊ฐ์ ํด๋ด์. ๋ถ๋ชจ โ ์์ โ ์์ โ ์์ โ ์์ โ ์์ โ ... ๋๋ฌด ๋ง์์ง๋ฉด ์ด๋ป๊ฒ ๋ ๊น์?
๊ทธ๋ provide์ Inject๋ฅผ ์ฌ์ฉํ๋ค๊ณ ์๊ฐํ์๋ฉด ๋์. (์ฌ์ค ์ด๋๋ vuex๊ฐ ๋ต์ธ๋ฐ..ใ ใ )
๋ง์ฝ์ ๋ถ๋ชจ ์์ ์ปดํฌ๋ํธ์ ๊ด๊ณ๊ฐ main.vue โ childComponent.vue โ another-child.vue๋ก ๊ตฌ์ฑ๋์ด ์๋ค๊ณ ํด๋ณผ๊ฒ์.
์ผ๋จ main.vue๋ ์๋์ ๊ฐ์ด provide๋ฅผ ๊ฐ์ฒดํํ๋ก ์ฌ์ฉํด์ ์์ ์ ์์๋ค์๊ฒ ๋ณด๋ด์ค ์ ์์ต๋๋ค.
// main.vue
<template>
<ChildComponent :propkey="data">
</ChildComponent>
</template>
<script>
import ChildComponent from './child-component.vue'
export default {
provide: {
providedValue: 'hello' // provide ๋ฑํ! ๊ฐ์ฒด๋ก ์ ๋ฌ!
},
components: {
ChildComponent // main์ ์์!
}
}
</script>
์ด์ ์์ providedValue์ main์ ์ด๋ค ์์์ด๋ผ๋ inject์ ํตํด ํด๋น ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ ์ ์์ด์. another-child.vue๋ ์๋ ์ฒ๋ผ ์ฝ๋๋ฅผ ์์ฑํ๋ฉด ๋๊ฒ ๋ค์!
// childComponent.vue
<template>
<div>
{{ providedValue }}
</div>
</template>
<script>
export default {
inject: [
'providedValue' // inject๋ฑํ! inject๋ก ๋ถ๋ฌ์ฌ๋ array ํํ๋ก provide๋ก ์ ๊ณต๋ ํค๋ฅผ ์ง์ ํ๋ค.
],
}
</script>
๊ทผ๋ฐ ์ด๋ป ๋ณด๋ฉด ๋๊ฒ ์ข์ ๊ฑฐ ๊ฐ์๋ฐ, ์ด๋ค ์ฌ๋๋ค์ ์ด๋ฐ ๋ง์ ํ๋ค์. prop์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ํ๊ธฐํด์จ ์ง๋๋ ๋ค๊ณผ ๋น๊ตํ์ ๋, provide๋ ์ด๋ ์ปดํฌ๋ํธ์์ ์ด๋ ํ ๋ฐ์ดํฐ๋ฅผ inject๋ก ์ ๊ณตํ๋์ง ์๋นํ ๋ถ๋ช ํํ ํ๊ธฐ๋ฒ์ด๋ผ๋ ์๊ฒฌ์ด ์๋ค์. ๊ทผ๋ฐ ์๊ฐํด๋ณด๋ฉด ๊ทธ๋ ์ฃ . ๊ฐ๋ฐ ํ ํ์ฐธ ๋ค์ inject๋ฅผ ๋ณด์์ ๋ ์ด๊ฒ ์ด๋์ ์๋๋ผ? ํ๊ณ ์ฐพ์์ผํ๋๊น์... ๊ทธ๋์ ํ๋ก์ ํธ์์ ๋๋ฆ์ ๊ท์น์ ๊ฐ์ง ์๋ ํ ํ์ ์ฝ๋ ๋ฆฌํฉํ ๋ง๊ณผ ๊ฐ์ ์ํฉ์ ์ง๋ฉดํ์ ๋ ์ ์ง๋ณด์๊ฐ ํ๋ค ์ ์๋ค๊ณ ํฉ๋๋ค.
๊ทธ๋ผ์๋ ์ฅ์ ์ ๋ถ๋ช ํ๋๊น. ๋ฏธ๋ฆฌ Component ๊ตฌ์กฐ๋ฅผ ์ ์ค๊ณํ๋ค๋ฉด ์ถฉ๋ถํ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค! ํนํ vuex๋ก ๊ด๋ฆฌํ๊ธฐ์๋ ์ ๋งคํ ๋ฐ์ดํฐ๋ค์ provide/inject๋ก ํ๋ฉด ์ข์๊ฑฐ ๊ฐ๋ค๋ ์๊ฒฌ๋ค๋ ์์๋ค์.
์๊ฐ๋ณด๋ค ์๋ง์ ๋ถ๋ถ์ด ๋ฐ๋์์ง๋ง, ๊ฐ์ฅ ์ค์ํ๊ฒ ๋ฐ๋ ๋ถ๋ถ์ด ๋ฐ๋ก Reactivity API์ Composition API์ด๊ธฐ ๋๋ฌธ์, ํด๋น ๋ถ๋ถ๋ง ์์งํ๊ณ ๊ณ์๋ฉด, FrontEnd๋ฅผ Vue 3๋ก ๊ตฌํํ๋ ๋ฐ ํฐ ๋์์ด ๋๋ฆฌ๋ผ ์๊ฐํฉ๋๋ค.