Vue3 : Composition API (ref, reactive)

컴포지션 API란?

컴포넌트 로직을 쓸 때 사용할 수 있는 대안

큰 규모의 Vue 애플리케이션 개발 시 크게 두 가지 한계나 문제 상황에 부딪힐 가능성이 있음.

 

문제

- 같이 있어야 하는 로직이 여러가지 옵션 즉, data(), methods, 연산 등에 나뉘어 있는 상황

- 컴포넌트의 로직을 재사용해야하는 경우 까다롭거나 복잡해질 수 있음.

 

기존 옵션API

data() {
  return {
    name: 'Max'
  }
},
methods: {
  doSmth() { ...}
}

컴포지션 API

setup() {
  const name = ref('Max')
  function doSmth(){...}
  return {name, doSmth} 
}

data(), methods, computed, watch 를 setup() 메서드로 통합.

프로퍼티, emits 옵션, 컴포넌트와 같은 다른 옵션들은 바꾸지 않음.

 

사용해 보기

<template>
  <div>
    <h2>{{userName}}</h2>
  </div>
</template>

import { ref } from 'vue'

export defalut {
  setup() {
    const uName = ref('Maxmilian')
    
    setTimeout(function() {
    	uName.value = 'Max'
    }, 2000)
    
    return { userName: uName }
  }
}

 

ref: setup()에서 호출 할 수 있는 함수

ref는 소위 참조를 생성하는데 DOM요소에 대해서 참조하는 것이 아니라 값을 참조해서 템플릿에서 쓸 수 있게 해줌.

아무런 값이나 생성하는 것이 아니라 반응형 값을 생성하기 때문에 이 값을 바꾸면 Vue도 인식하고 감시할 수 있어서 값이 바뀌거나 템플릿에 사용되면 Vue는 DOM에서 템플릿을 업데이트할 수 있음.

 

return으로 반환해줘야 함

.value로 값을 동적으로 바꿀 수 있음.

 

이렇게 대체 가능

<script setup>
import { ref } from 'vue';
 
const uName = ref('Maximilian');
 
setTimeout(function() {
  uName.value = 'Max';
}, 2000);
</script>

---

<template>
  <div>
    <h2>{{user.name}}</h2>
    <h3>{{user.age}}</h3>
  </div>
</template>

import { ref } from 'vue'

export defalut {
  setup() {
   const user = ref({
     name: 'Maximilian',
     age: 31
   })
    
    setTimeout(function() {
    	user.value.name = 'Max'
        user.value.age = 32
    }, 2000)
    
    return { userName: user.value.name , age: user.value.age, user: user }
  }
}

객체형으로 쓰게 되면 { user: user }로 return해 줘야 함

reactive: 객체용으로 만들어짐

객체만 전달해야 함

import { reactive } from 'vue'

export defalut {
  setup() {
   const user = reactive ({
     name: 'Maximilian',
     age: 31
   })
    
    setTimeout(function() {
    	user.name = 'Max' // value 안 쓰고 바로 접근 가능
        user.age = 32 // value 안 쓰고 바로 접근 가능
    }, 2000)
    
    return { user: user }
  }
}

 

객체를 사용한다면 ref와 reactive 중에서 고르고,

객체는 없고 문자열이나 숫자가 있다면 ref를 써야 함