데이터가 변하면 요소를 다시 랜더링하기 : reactive

Vue.js 의 가장 큰 강점은, 데이터와 요소의 연동성이다.

Vue.js 는 언제나 데이터 중심으로 사고해야한다.

즉, 데이터가 변하면 요소가 이를 반영하여 다시 랜더링된다.

하지만 이게 저절로 되는것은 아니고 

script 안에서 'reactive' 를 import 해야한다.

import { reactive } from 'vue'

이 reactive 함수를 사용하여 데이터를 형성하고,

이렇게 만들어진 데이터를 사용한 요소는 해당 데이터가 변하였을때

다시 랜더링되게 된다.

 

버튼을 누를때마다 값이 랜덤으로 변하는 코드를 작성해보자.

<template>

  <button @click="random()">Click me!</button>
  <div>{{state.number}}</div>

</template>

<script>

  import { reactive } from 'vue'

  export default {

    setup() {

      const state = reactive({ number : 0 });
 
      function random() { state.number = Math.random(); }

      return { state, random };

    }

  }

</script>