Input + Output = True

vue 3 ๋ฐ˜์‘ํ˜• - reactive and ref ๋ณธ๋ฌธ

๐ŸŽจFrontEnd/Vue

vue 3 ๋ฐ˜์‘ํ˜• - reactive and ref

IOTrue 2023. 7. 5. 22:45

๐Ÿ˜Ž vue 3 ๋ฐ˜์‘ํ˜• - reactive and ref

composition API๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค

 

๋ฐ˜์‘ํ˜•
vue์—์„œ๋Š” ๋ฐ์ดํ„ฐ์˜ ์‹ค์‹œ๊ฐ„ ์—…๋ฐ์ดํŠธ๊ฐ€ ๊ฐ€๋Šฅํ•œ ๊ฒƒ์„ ๋ฐ˜์‘ํ˜•์ด๋ผ๊ณ  ํ•œ๋‹ค

โœ…  reactive

reactive() ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ์ฒด ๋˜๋Š” ๋ฐฐ์—ด์„ ๋ฐ˜์‘ํ˜•์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค

๋ฐ˜ํ™˜ ๊ฐ’์€ ์›๋ณธ ๊ฐ์ฒด์™€ ๊ฐ™์ง€ ์•Š๊ณ  ์›๋ณธ ๊ฐ์ฒด๋ฅผ ์žฌ์ •์˜ํ•œ ๊ฐ์ฒด์ด๋‹ค

const raw = {}
const proxy = reactive(raw)
// ๋ฐ˜์‘ํ˜•์œผ๋กœ ์žฌ์ •์˜ ๋œ ๊ฒƒ์€ ์›๋ณธ๊ณผ ๊ฐ™์ง€ ์•Š๋‹ค
console.log(proxy === raw) // false

๊ฐ์ฒด, ๋ฐฐ์—ด ๋˜๋Š” Map์ด๋‚˜ Set๊ณผ ๊ฐ™์€ ์ปฌ๋ ‰์…˜ ์œ ํ˜•์—๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค

 

reactive ์˜ˆ์ œ

์ˆซ์ž๊ฐ€ ์ฆ๊ฐ€ํ•˜๋ฉฐ ํ™”๋ฉด์— ์‹ค์‹œ๊ฐ„ ๋ฐ”์ธ๋”ฉ์„ ํ•˜๋Š” ์˜ˆ์ œ์ด๋‹ค

reactive ์‚ฌ์šฉ ์—ฌ๋ถ€์— ๋”ฐ๋ฅธ ์ฐจ์ด์ ์„ ๋น„๊ตํ•ด๋ณด์ž

<div>{{ state.count }}</div>
<button @click="state.count++">state.count++</button>
<div>{{ countNormal }}</div>
<button @click="countNormal++">countNormal++</button>


import { reactive } from "vue"

const countNormal = 0
const state = reactive({ count: 0 })

reactive๋ฅผ ์‚ฌ์šฉํ•œ state.count์˜ ์‹ค์‹œ๊ฐ„ ๋ฐ”์ธ๋”ฉ๋งŒ ๊ฐ€๋Šฅํ•˜๋‹ค

์ด๋ ‡๊ฒŒ ์‹ค์‹œ๊ฐ„ ๋ฐ”์ธ๋”ฉ์ด ๊ฐ€๋Šฅํ•œ ๊ฒƒ์„ vue์—์„œ๋Š” ๋ฐ˜์‘ํ˜•์ด๋ผ๊ณ  ํ•œ๋‹ค

 

reactive()๋Š” ์˜ˆ์ œ๋ฅผ ๋ณด๋ฉด ์•Œ ์ˆ˜ ์žˆ๋“ฏ์ด state.count์ฒ˜๋Ÿผ ํŠน์ • ๊ฐ’์— ์ ‘๊ทผํ•  ๋•Œ์—๋Š” ๋ฐ์ดํ„ฐ์˜ ์†์„ฑ์œผ๋กœ ์ ‘๊ทผํ•ด์•ผํ•œ๋‹ค

 

โœ…  ref

ref()๋Š” reactive์˜ ์ œํ•œ ์‚ฌํ•ญ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด, ํƒ€์ž… ์ œํ•œ ์—†์ด ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜์‘ํ˜•์œผ๋กœ ์žฌ์ •์˜ํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜์ด๋ฉฐ

.value ์†์„ฑ์„ ํฌํ•จํ•˜๋Š” ref ๊ฐ์ฒด๋กœ ๋ฐ˜ํ™˜ํ•œ๋‹ค

const countRef = ref(0)
console.log(countRef) // { value: 0 }
console.log(countRef.value) // 0
countRef.value++
console.log(countRef.value) // 1

 

 

ref ์˜ˆ์ œ

reactive() ์˜ˆ์ œ์™€ ๊ฐ™์ด '์ˆซ์ž๊ฐ€ ์ฆ๊ฐ€ํ•˜๋ฉฐ ํ™”๋ฉด์— ์‹ค์‹œ๊ฐ„ ๋ฐ”์ธ๋”ฉ์„ ํ•˜๋Š” ์˜ˆ์ œ'๋ฅผ ํ†ตํ•ด์„œ

reactive์™€ ref์˜ ๋ฌธ๋ฒ• ์ฐจ์ด์ ์„ ๋น„๊ตํ•ด๋ณด์ž

<div>{{ stateReactive.count }}</div>
<button @click="stateReactive.count++">stateReactive.count++</button>
<div>{{ countRef }}</div>
<button @click="countRef++">countRef++</button>


import { reactive, ref } from "vue"

const stateReactive = reactive({ count: 0 })
console.log(stateReactive.count)

const countRef = ref(0)
console.log(countRef.value)

template์— ๋ฐ”์ธ๋”ฉ์„ ํ•  ๋•Œ ref๋Š” ์†์„ฑ์ด ์•„๋‹Œ ํ•ด๋‹น ๋ฐ์ดํ„ฐ์— ๋ฐ”๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— reactive์— ๋น„ํ•ด ๊ฐ„๋‹จํ•˜๋‹ค

ํ•˜์ง€๋งŒ ref๋Š” script ์˜์—ญ์—์„œ ํ•ด๋‹น ๋ฐ์ดํ„ฐ์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” .value๋ฅผ ํ†ตํ•ด์„œ ์ ‘๊ทผํ•ด์•ผ ํ•œ๋‹ค

 

โœ…  reactive vs ref

  • reactive()์™€ ref() ๋ชจ๋‘ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค
  • reactive๋Š” ๊ฐ์ฒด์™€ ๋ฐฐ์—ด ๋˜๋Š” ์ปฌ๋ ‰์…˜ ์œ ํ˜•๋งŒ ๋ฐ˜์‘ํ˜•์œผ๋กœ ์žฌ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค
  • ref๋Š” ํƒ€์ž…์ œํ•œ ์—†์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค

reactive์™€ ref๋ฅผ ํ˜ผ์šฉํ• ์ง€ ํ•˜๋‚˜๋งŒ์„ ์‚ฌ์šฉํ• ์ง€์— ๋Œ€ํ•œ ์ปจ๋ฒค์…˜์„ ์ •์˜ํ•œ ํ›„ ํ•ด๋‹น ์ปจ๋ฒค์…˜์„ ๋”ฐ๋ผ๊ฐ€๋ฉด ๋œ๋‹ค

 

 

โœ…  ๋ž˜ํ•‘, ์–ธ๋ž˜ํ•‘

์–ด๋–ค ๊ฐ’์ด ref์— ํ• ๋‹น๋˜์–ด ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•œ๋‹ค

์ด ๋•Œ, .value๋ฅผ ํ†ตํ•ด ํ• ๋‹น๋œ ๊ฐ’์— ์ ‘๊ทผํ•ด์•ผ ํ•œ๋‹ค๋ฉด "๋ž˜ํ•‘"๋œ ๊ฒƒ์ด๊ณ  .value ์—†์ด ์ ‘๊ทผ๋œ๋‹ค๋ฉด "์–ธ๋ž˜ํ•‘"๋œ ๊ฒƒ์ด๋‹ค

์•„๋ž˜ ์˜ˆ์ œ๋ฅผ ๋ณด๋ฉด script ์˜์—ญ์—์„œ๋Š” ๋ž˜ํ•‘๋˜์–ด ์žˆ๊ณ  template ์˜์—ญ์—์„œ๋Š” ์–ธ๋ž˜ํ•‘๋˜์–ด ์žˆ๋‹ค

<div>{{ countRef }}</div>
<button @click="countRef++">countRef++</button>


import { ref } from "vue"

const countRef = ref(0)
console.log(countRef.value)

 

 

 

https://v3-docs.vuejs-korea.org/guide/essentials/reactivity-fundamentals.html

 

๋ฐ˜์‘ํ˜• ๊ธฐ์ดˆ | Vue.js

 

v3-docs.vuejs-korea.org

 

'๐ŸŽจFrontEnd > Vue' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

vue 3 - v-for ๋ฐ˜๋ณต๋ฌธ  (0) 2023.07.12
vue 3 - v-if, v-show  (0) 2023.07.12
vue 3 - class & style  (0) 2023.07.11
vue 3 - computed (computed vs method)  (0) 2023.07.09
vue 3 ๊ธฐ๋ณธ ๋ฌธ๋ฒ•  (1) 2023.07.04
Comments