vue.js - script 태그에서 setup 속성을 사용하여 ref와 함수를 사용해보기!

 
일반적으로 script 태그에서 setup 속성을 사용하지 않으면,
vue.js 코드를 작성할 때 아래와 같이 작성하게 된다.
 

script 태그 setup 속성을 사용하지 않은 경우

<template>
  <div>
    <h1>{{hello}}</h1>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const hello = ref('안녕하세요.');

    return { hello }
  }
}
</script>

 
 
그렇지만 setup 속성을 사용하여 작성하게 된다면 아래와 같이 단축하여 작성할 수 있다.
 

script 태그 setup 속성을 사용한 경우

<template>
  <div>
    <h1>{{hello}}</h1>
  </div>
</template>

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

const hello = ref('안녕하세요.');
</script>

 
 

위 와 같이 setup 속성을 사용하게 되면 export default 부분과 setup 함수, return 을 사용하지 않고,
변수만 만들어주면 된다.
 
위에서는 반응형 데이터만 만들어서 해보았는데요.
다음으로는 함수도 만들어서 사용해보도록 하겠습니다!
 

setup 속성을 사용한 함수 사용

<template>
  <div>
    <h1>{{ hello }}</h1>
    <button type="button" @click="addMessage">추가</button>
  </div>
</template>

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

const hello = ref('안녕하세요.')

const addMessage = () => {
  hello.value += '반갑습니다.'
}
</script>

 
 

함수도 return 에 넣어줄 필요 없이 함수만 만들어서 사용해 주면 됩니다!
 

최종 결과화면

 
 
다음 포스팅에서는 setup 속성을 사용한 script 태그안에서 props와 emit 사용하는 방법을 알려드리도록 하겠습니다.