Vue3 ref&reactive 사용법 화면에 요소 변환하여 출력하기

<template>
<div class ="container">
<div class="name">{{name}}</div>
<button class="btn btn-primary" v-on:click="updateName">
  버튼
</button>
</div>
</template>
<script>

export default {
setup()
{
  let name= 'BbakSsang';
  
  var  updateName = ()=>{
    name= "빡상"
    console.log(name)
  }


  return {
    name,updateName
  }; 
}
}
</script>
<style>
.name{
  color: blueviolet;
}

</style>

화면 구성

이 코드로는 name변수에 BbakSsang이 저장되어있고, 버튼이 클릭되면 빡상 으로 바뀌어야 하지만 클릭을 한다고

화면에 출력이 바뀌지 않는다

 

하지만 콘솔로 확인해보면 name이 바뀐모습을 확인 할 수 있다.

 

Vue 에서 화면까지 변환을 하려면 Ref  또는 Reactive를 사용해야한다.

 

 

---

• Ref 사용법

<Script>
import {ref} from 'vue'
</Script>

ref 를 vue로부터 가져온다

  let name= ref('BbakSsang');
  
  var  updateName = ()=>{
    name.value= "빡상"
    console.log(name)
  }

변수를 ref()로 묶어주고, 업데이트 하고자 하는 부분에서 변수.value로 사용해야한다.

 

클릭후 잘 변경된 모습

---

• Reactive 사용법

reactive는 배열 또는 객체에 사용하기 좋은 방식인것 같다

import {reactive} from 'vue'

Ref와 같이 reactive를 import한뒤

  let name= reactive({
    id:'BbakSsang'
  });
  
  var  updateName = ()=>{
    name.id= "빡상"
    console.log(name)
  }

name 변수를 object로 변환하였다

이름은 name.id에 저장되어있는 셈.

클릭전

클릭후