vue 코드를 보다보면 리액트와는 다르게 computed를 어렵지 않게 찾아볼 수 있는데 이건 언제 어떻게 사용하는지가 궁금했다. computed 속성은 템플릿의 데이터 표현을 좀 더 직관적이고 간결하게 도와주는 속성이라고 하는데 템플릿 내에 너무 많은 조건과 연산식을 넣으면 템플릿이 복잡해지고 유지보수가 어려워지기에 이를 사용한다고 한다.
1. computed 사용 예시
예를들면 아래의 코드처럼 데이터 연산식을 템플릿 코드에 그대로 넣는다고 생각해보자. 연산이 길어지면 길어질수록 복잡해지는 것을 알 수 있다.
<div>
<p>{{ data }}</p>
<span>{{ data.split('').reverse().join('') }}</span>
</div>
이렇게 한줄만 있을 경우에는 그나마 낫지만 동일한 계산식이 템플릿에 두번 이상 쓰일 수도 있기 때문에 반복되는 부분을 계산된 속성으로 따로 빼주면 더 편할 것 같다. 이 때 computed 속성을 사용한다.
<script setup>
const data = ref("hello!");
const reverseData = computed(() => {
return data.value.split("").reverse().join("");
});
</script><div>
<p>{{ data }}</p>
<span>{{ reverseData }}</span>
</div>
2. computed의 장점
computed 속성을 사용하면 뷰 템플릿 코드의 가독성을 높여주면서 해당 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해준다는 장점이 있다. data 값을 다른 것으로 변경하면 reverseData 역시 자동으로 계산되어 화면에 바뀐 값이 갱신된다. 반대로 생각하면 computed는 data가 변하지 않는 한 reverseData가 몇번이나 호출되어도 함수가 다시 실행되지 않고 이전에 계산되어진 결과를 즉시 반환한다는 것이다.
- computed는 data가 변하지 않는 이상 이전 결과값을 그대로 반환함
- data가 변하면 이를 감지하고 자동으로 다시 계산
3. computed의 특징
computed 속성은 인자를 받지 않으며, HTTP 통신과 같이 컴퓨팅 리소스가 많이 필요한 로직을 정의하지 않는다는 특징을 가진다. 기본적으로 computed 속성은 템플릿 코드의 가독성을 위한 기능이기에 HTTP 통신과 같이 브라우저 리소스가 많이 드는 코드들은 watch나 methods에 넣어 실행시키는 것이 적합하다고 한다.
[ 인자를 받지 않음 ]
<div>{{ reverseData(false) }}</div><script setup>
const data = ref("hello!");
const reverseData = computed((value) => {
return value ? data.value.split("").reverse().join("") : data.value;
});
</script>
[ HTTP 통신 코드를 제외함 ]
<script setup>
const data = ref("hello!");
const reverseData = computed(() => {
return axios.get('/data').then((res) => {
console.log(res)
})
});
</script>
4. computed와 methods의 차이는?
computed 속성은 앞서 말한 것처럼 data가 변하지 않는 이상 이전 계산 결과를 자동으로 반환하도록 되어있지만, methods는 그러한 기능이 없다. 그렇기 때문에 호출 할 때마다, 렌더링을 다시 할 때마다 계산식을 실행하여 결과값을 반환하게 되는 것이다.
5. computed와 watch의 차이는?
computed 속성과 watch 는 둘다 변경을 감지한다는 점에서 혼동하기 쉽다. 하지만 두가지는 사용 용도에 있어 분명한 차이가 있는데 computed의 경우 기존에 정의된 데이터 값을 기반으로 새로운 데이터 값을 활용하기 위해 사용된다면, watch는 watch에 정의된 데이터 값 하나만을 감시하기 위한 용도로 사용된다고 한다. 또한, watch는 computed와 다르게 실제 데이터 변경이 일어나기 전까지는 실행되지 않는다.
