데이터안에서 계산하기 : computed ( in reactive)

데이터를 만들어다보면, 새로운 데이터를 다른 데이터로부터 계산되어 

만들고자할때가 자주 발생할것이다.

 

다음은 실제나이와 한국나이를 데이터로 표현한것이다.

const state = {

    age     : 10,
    ageK    : 11,

}

위와 같이 하지않고, ageK 를 age + 1 로 표현할수없을까.

const state = {

    age     : 10,
    ageK    : age + 1,

}

불행히도, 위와 같은 문법은 JavaScript 에서 허용하지않는다.

이를 위해 Vue 에서 제공하는 기능인 computed 함수를 사용하면,

함수의 인자로 데이터를 넘길수있다.

computed 를 사용하기위해서는 이 역시 import 되야한다.

computed 를 사용하여 작성한 코드는 아래와 같다.

<script>

  import { computed } from 'vue'

  export default {

    setup() {

      const state = {

        age     : 10,
        ageK    : computed(() => state.age + 1),

      }

    }

  }

</script>

주의할점은, age + 1 이 아닌, state.age + 1 이여야한다.

하지만 위의 코드는 작동하지않는다.

왜냐면 computed 는 reactive 함수 내부에서만 사용할수있기때문이다.

따라서 최종 코드는 아래와 같다.

<template>
  
  {{ state.ageK }}

</template>

<script>

  import { reactive, computed } from 'vue'

  export default {

    setup() {

      const state = reactive({

        age     : 10,
        ageK    : computed(() => state.age + 1), // 11

      });

      return { state };

    }

  }

</script>

더 이상 깊이 이해하려하지말고, 그냥 외우는게 정답이다.