[Vue] Vue 정리하기(6) - Vue3 composition api 2편 (setup, ref)

1편에 이어 오늘은 컴포지션 api를 어떻게 사용하는지 알아보겠다

 

부디 1편에서 vue2와 vue3의 차이를 잘 이해했기를 바란다

 

(이번편도 마찬가지로 공식 문서와 여러 블로그를 참고했다)

 

---

setup

 

전편에서 설명했듯 뷰3에서는 데이터와 메서드 등을 setup훅 안에 작성한다

 

그래서 나는 뷰3 프로젝트를 할 때도 스크립트 안에 setup 안에 변수, 함수등을 작성했다.

 

<script>
import { computed, ref } from "vue";
import { useStore } from "vuex";
export default {
  name: "MovieMain",
  setup() {
    const movie_toggle = ref(false)
    const store = useStore()
    const goHome = () => {
        store.commit("CHANGE_NOWSTATE", "home")
    }
    }
    const movies = computed(() => store.state.module_A.movies)
    return { goHome,movies,movie_toggle }
  },
};
</script>

 

뭐 대충 이런식으로??? 근데 이 글을 쓰려고 공식문서를 살피다가

 

<script setup>
import { ref, onMounted } from 'vue'

// 반응형 상태
const count = ref(0)

// 상태를 변경하고 업데이트를 트리거하는 함수
function increment() {
  count.value++
}

// 생명주기 훅
onMounted(() => {
  console.log(`숫자를 세기 위한 초기값은 ${count.value} 입니다.`)
})
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

 

이런 식으로 작성이 돼있는 거다

 

차이를 알겠나????

 

따로 setup(){} 여기 안에 코드를 작성하는 게 아니라 

 

"<script setup>"

 

이거를 스크립트 시작에 놓고 그냥 작성을 하는 거다!!!

(요즘 프로젝트 생성을 하면 <script setup>이게 저절로 들어가 있었는데 난 저게 뭔지도 모르고 그냥 지우고 원래 하던 데로 코딩하곤 했었다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ)

 

그래서 이게 뭐지?? 하고 검색을 해봤더니 

https://mine-it-record.tistory.com/640 <== 요기참고함

 

일단 <script setup>을 사용하면 setup()이 걸 사용할 때와 다르게 변수나 함수를 일일이 return을 안 해줘도 된다는 거다

 

맨날 변수나 함수 만들고 리턴에 넣어줘야 하는 게 완전 귀찮았는데 이제야 이걸 알게 되다니....

 

이 글은 읽은 사람들은 나같은 일을 겪지 않길 바란다

 

그 외에 <script setup>의 장점은

더 간결하게 코드를 작성할 수 있고 런타임 성능 향상등이 있다고 한다.

 

무튼 그렇기 때문에 <script setup> 을 사용하는 게 당연히 더 좋은 것 같다

 

 

---

ref, reactive

 

반응형 data 를 만들 때는 ref 또는 reactive를 사용한다

 

먼저 ref는 다음과 같이 사용하면 된다

 

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }} <!-- .value가 필요하지 않습니다. -->
  </button>
</template>

 

변수의 값을 변경할 때 변수.value를 사용하여 변경해야 하며

template 부분에서 사용할때는 .value를 사용하지 않아도 된다

 

reactive도 ref와 비슷하지만 ref는 어떠한 타입이든 사용할 수 있지만 reactive는 object,array,set과 같은 타입에서만 사용할 수 있고(원시타입은 사용할 수 없음),

변수에 접근할 때 .value를 사용하지 않아도 된다는 차이점이 있다.

 

ref가 모든 타입에 대응 할 수도 있고 유지보수 측면이나 가독성 부분에서도 좋다고 대부분의 블로그에서 얘기하고 있다.

 

그래서 ref 하나만을 사용해서 프로젝트를 하거나

두개를 사용해서 프로젝트를 하려면 팀내 컨벤션을 잘 지켜서 코드를 작성하는게 좋을 것 같다.

 

 

오늘은 setup과 ref등을 알아보았다 

 

내가 아는 범위에서 이정도만 알고 vue2로 코드를 작성해 봤다면

vue3에서 프로젝트에 진행하기에는 무리가 없다고 생각한다 (매우 개인적인 생각 ㅎ)

 

무튼 열심히 공부해보시길

 

그럼 빠이~~