Vue Tutorial 따라하기 - Computed Properties

Computed Properties.

코드의 재사용성을 높이기 위해 Computed Properties를 사용 할 수 있는데,

여기서 Computed Properties는 바로 컴퓨터가 우리 대신 연산을 해서 값을 리턴해주는것을 뜻한다.

 

예제를 보자.

 

computed Properties를 사용하지 않을 경우.

- index.html

...
	<h1>{{ brand + ' ' + product }}</h1>
...

- Main.js

const app = Vue.createApp ({
	data(){
    	return {
            cart:0,
            product: 'Socks',
            brand:'Vue Mastery',
            ...
        }
    }
})

위와 같이 코드를 작성했을 경우 h2태그 내에 우리가 지정해준 뷰앱 속성값이 치환되어 웹페이지에 출력되게 된다.

---

하지만, 이 값들이 무엇을 의미 하거나 재사용성이 있거나 하지는 않다.

때문에 이러한 값들을 의미있게, 또는 대신 계산 해주도록 하기 위해 다음과 같이 코드를 변경할 수 있다.

 

 

-index.html

...
<h1>{{ title }}</h1>

- Main.js

const app = Vue.createApp({
	data() {
    	return {
            product: 'Socks',
            brand: 'Vue Mastery',
        }
    },
    computed: {
    	title(){
        	return this.brand + ' ' + this.product
        }
    }
})

위와 같이 변경할 수 있다.

결과는 똑같지만, 이 방법의 장점은 바로 computed properties는 이 값을 캐싱해놨다가 꼭 필요할때에만 사용한다는 것이다.

dependency가 변경 된다던지 (예를 들어 brand 값이 변한다거나) 할때만 이 값을 새로 calculate한 후에 리턴해준다.

고로, 성능 향상에 도움이 된다.

 

지난 시간까지의 예제를 보면 다음과 같이 색상에 mouse over시에 해당 색상의 이미지가 출력되게 되어있다.

하지만, 이 제품의 상세 설명에 해당하는 값들이 출력되지는 않는 문제가 있다.

computed properties를 사용하면 이와 같은 문제를 효율적으로 다룰 수 있다.

-> 즉, Blue에 mouseover할 경우 이미지 뿐만 아니라

파랑 양말의 세부사항이 매핑되어 출력되게 할 수 있다.

variants: [
              { id: 2234, color: 'green', image: './assets/images/socks_green.jpg', },
              { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' },
            ]

- index.html