[Vue] Computed Properties

 

안녕하세요. 혀코입니다.

 

이번 시간에는 Vue의 computed 속성에 대해서 알아보겠습니다.

 

우선 components 폴더 안에 Company.vue 파일을 다음과 같이 작성하고 App.vue에서 Company.vue 파일을 불러와서 Company 목록을 출력해 보도록 하겠습니다.

 

/components/Company.vue

 

<template>
  <div v-if="companies.length > 0">
    <ul>
      <li v-for="company in companies" :key="company">
        {{ company }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      companies: [
        'Naver', 'Kakao', 'Coupang', 'Carrot', 'Toss'
      ]
    }
  }
}
</script>

 

App.vue

 

<template>
  <Companies />
</template>

<script>
import Companies from './components/Companies.vue'

export default {
  components: {
    Companies
  }
}
</script>

 

아래와 같이 출력 되었습니다.

 

 

여기서 Companies.vue에서 companies 배열을 삭제하면 v-if directive 조건 companies.length가 0이 되므로 화면상에 아무것도 출력하지 않습니다.

 

여기서 v-if에 바로 조건식을 적는 대신 computed property를 사용하면 다음과 같습니다.

 

<template>
  <div v-if="hasCompany">
    <ul>
      <li v-for="company in companies" :key="company">
        {{ company }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      companies: [
        'Naver', 'Kakao', 'Coupang', 'Carrot', 'Toss'
      ]
    }
  },
  computed: {
    hasCompany() {
      return this.companies.length > 0
    }
  }
}
</script>

 

computed property를 추가하고 그 안에 hasCompany 함수를 만들고 companies 배열의 길이가 0보다 크면 true를 0보다 작거나 같으면 false를 리턴합니다. 그리고 v-if 에는 hasCompany 함수를 지정해 주면, computed property의 hasCompany 함수에 의해 계산된 값이 v-if 조건문에 전달되어 companies 배열의 길이가 0일때 화면에 아무것도 출력할 수 없도록 만듭니다.

 

여기서 문자열을 뒤집는 reverseCompany 함수를 computed property 에 추가해 보겠습니다.

 

<template>
  <div v-if="hasCompany">
    <h1>Company</h1>
    <ul>
      <li v-for="company in companies" :key="company">
        {{ company }}
      </li>
    </ul>
  </div>
  <div v-if="hasCompany">
    <h1>Reverse Company</h1>
    <ul>
      <li v-for="company in reverseCompany" :key="company">
        {{ company }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      companies: [
        'Naver', 'Kakao', 'Coupang', 'Carrot', 'Toss'
      ]
    }
  },
  computed: {
    hasCompany() {
      return this.companies.length > 0
    },
    reverseCompany() {
      return this.companies.map(company => {
        return company.split('').reverse().join('')
      })
    }
  }
}
</script>

 

문자열을 뒤집는 함수를 추가해서 v-for 반복문을 돌릴때 배열을 그 함수로 지정해서 리턴된 문자열이 뒤집어진 배열을 받아 출력하면 다음과 같은 화면을 출력할 수 있습니다.

 

 

이렇게 Vue의 computed 속성에 대해서 알아봤습니다.

 

computed property는 method와 비교하자면, computed property는 계산된 값으로 cashing이라는 기능이 있어 읽기전용의 상수의 개념을 지니며, method는 그때 그때 연산과정을 거쳐 실행되기 때문에 동일한 연산과정이 아주 많이 반복된다면 computed property를 사용하는 것을 추천합니다.

 

해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.

 

감사합니다. :)