웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS와 이를 기반으로 SSR을 위해 만들어진 NuxtJS 모두 가장 인기있는 프레임워크 중 하나입니다. 오늘은 내장 API 중 데이터 처리를 위해 사용하는 computed에 대하여 알아봅니다. 어떻게 하면 computed 속성을 더 잘 이해하고 잘 사용하기 위한 방법입니다.
(아래부터 vuejs nuxtjs 구분없이 모두 nuxtjs를 기준으로 얘기하겠습니다)
computed는 상태 관리를 위해 사용되는 API로 컴포넌트의 데이터를 관리하고 사용하기 위해 제공됩니다. 사실 상태 관리를 위해서 data API만 잘사용해도 기능 구현에는 전혀 문제가 없습니다. 다만 프론트엔드 앱은 다양한 비동기 데이터와 이벤트가 존재하는데 이를 잘 핸들링하는 것은 쉽지 않죠. 왜냐하면 비동기 이벤트 등은 특정 시점에 발생하지 않기 때문에 상태 데이터 상의 종속 관계가 존재하는 경우 해당 이벤트의 순서에 따라 결과가 달라지기 때문입니다.
이런 데이터의 흐름을 잘 처리하기 위한 여러가지 개발측면의 디자인 패턴이 존재하는데요 이 중에서 옵져버 패턴이 computed와 닮아있으며 실제로 비슷하기 동일하게 됩니다. 예를들어 옵져버 패턴은 데이터 대상에 대한 관찰자가 존재해 변경이 있을 때마다 즉시 값을 업데이트해주는데요 computed 역시 내부에 사용된 상태 값을 감시하여 즉시 업데이트 및 결과를 반환하죠. 이런 프로그래밍을 반응형 프로그래밍(Reactive programming)이라고 부르죠.
만약 데이터의 변화에 따른 종속된 결과를 보다 쉽게 반영하고 사용하기 위해서는 computed를 사용하는 것이 좋습니다. computed를 사용하면 시간에 따른 상태 값의 변화를 알기 위해 또 다른 상태 값을 만드는 등의 변수 사용을 줄일 수 있고 결국 앱 또는 컴포넌트 단위의 복잡도와 에러를 낮추는 데 도움을 줍니다.
그렇다면 computed의 특징은 무엇일까요? 대표적인 특징으로 다음과 같습니다.
- 읽기 전용 속성(readonly)
- 데이터 캐싱
- 항상 결과를 리턴
위 3가지가 computed의 대표적인 특징입니다. 읽기전용 속성인 이유인 양방향으로 동작시 복잡도가 올라가고 디버깅 등이 어렵기 때문입니다. 데이터 캐싱도 되는데 복잡한 연산이나 리소스가 반복되는 경우 computed를 사용하는 방법이 추천됩니다. 성능에 큰 도움이 주죠. 또한 computed는 항상 결과를 반환해야만 합니다.
여기까지 nuxtjs에서의 computed에 대하여 알아보았습니다. 다음은 간단한 computed 예제를 만들어보겠습니다.
이번 예제는 computed를 사용하는 간단한 예제를 만들어보겠습니다. api를 호출해 사이트 목록을 가져와 변수를 업데이트 합니다. 업데이트 된 값은 computed를 사용하여 적용한 <template> 영역에 출력되는 예제입니다. 단 출력 가능한 maxSize 값이 siteList에 함께 종속되어 있습니다. 이 예제의 간략한 프로세스는 다음과 같이 됩니다.
이제 코드를 작성해보겠습니다. computed는 nuxtjs 환경을 가정하여 작성했으며 composition API를 사용한 computed() 메소드를 사용한 예제입니다. (Vue 2의 경우 options API와 동일)
여기까지 computed를 사용한 예제가 작성 완료되었습니다.
위 예제는 간단한 비즈니스 로직의 앱이므로 computed의 강력한 리액티브 효과를 크게 경험할 수는 없습니다. 만약 더 많은 복잡한 로직이 추가되고 다양한 변수와의 종속 관계가 추가되거나 더 많은 비동기 호출 및 이벤트가 사용된다면 computed를 사용하였을 경우와 아닐 경우의 차이를 더 체감하실 수 있을 것입니다.
코드를 작성하면서 어떻게 작성하는지를 아는 것도 중요하지만 왜 사용하는지와 어떤 장점과 단점이 있는지 나아가 왜 이렇게 작성하는지를 고민하면서 코드를 작성하고 이해하는 습관도 필요할 것입니다. 여기까지 computed 속성에 대하여 알아보았습니다.
(아래부터 vuejs nuxtjs 구분없이 모두 nuxtjs를 기준으로 얘기하겠습니다)
nuxtjs에서 computed는?
computed는 상태 관리를 위해 사용되는 API로 컴포넌트의 데이터를 관리하고 사용하기 위해 제공됩니다. 사실 상태 관리를 위해서 data API만 잘사용해도 기능 구현에는 전혀 문제가 없습니다. 다만 프론트엔드 앱은 다양한 비동기 데이터와 이벤트가 존재하는데 이를 잘 핸들링하는 것은 쉽지 않죠. 왜냐하면 비동기 이벤트 등은 특정 시점에 발생하지 않기 때문에 상태 데이터 상의 종속 관계가 존재하는 경우 해당 이벤트의 순서에 따라 결과가 달라지기 때문입니다.
"computed를 사용하여 더 효과적인 데이터 흐름에 다른 처리가 가능하다"
이런 데이터의 흐름을 잘 처리하기 위한 여러가지 개발측면의 디자인 패턴이 존재하는데요 이 중에서 옵져버 패턴이 computed와 닮아있으며 실제로 비슷하기 동일하게 됩니다. 예를들어 옵져버 패턴은 데이터 대상에 대한 관찰자가 존재해 변경이 있을 때마다 즉시 값을 업데이트해주는데요 computed 역시 내부에 사용된 상태 값을 감시하여 즉시 업데이트 및 결과를 반환하죠. 이런 프로그래밍을 반응형 프로그래밍(Reactive programming)이라고 부르죠.
만약 데이터의 변화에 따른 종속된 결과를 보다 쉽게 반영하고 사용하기 위해서는 computed를 사용하는 것이 좋습니다. computed를 사용하면 시간에 따른 상태 값의 변화를 알기 위해 또 다른 상태 값을 만드는 등의 변수 사용을 줄일 수 있고 결국 앱 또는 컴포넌트 단위의 복잡도와 에러를 낮추는 데 도움을 줍니다.
그렇다면 computed의 특징은 무엇일까요? 대표적인 특징으로 다음과 같습니다.
- 읽기 전용 속성(readonly)
- 데이터 캐싱
- 항상 결과를 리턴
위 3가지가 computed의 대표적인 특징입니다. 읽기전용 속성인 이유인 양방향으로 동작시 복잡도가 올라가고 디버깅 등이 어렵기 때문입니다. 데이터 캐싱도 되는데 복잡한 연산이나 리소스가 반복되는 경우 computed를 사용하는 방법이 추천됩니다. 성능에 큰 도움이 주죠. 또한 computed는 항상 결과를 반환해야만 합니다.
여기까지 nuxtjs에서의 computed에 대하여 알아보았습니다. 다음은 간단한 computed 예제를 만들어보겠습니다.
computed를 사용한 예제 만들기
이번 예제는 computed를 사용하는 간단한 예제를 만들어보겠습니다. api를 호출해 사이트 목록을 가져와 변수를 업데이트 합니다. 업데이트 된 값은 computed를 사용하여 적용한 <template> 영역에 출력되는 예제입니다. 단 출력 가능한 maxSize 값이 siteList에 함께 종속되어 있습니다. 이 예제의 간략한 프로세스는 다음과 같이 됩니다.
- 상태값 변수 siteList 변수와 값으로 빈배열 선언
- siteList 목록은 maxSize 상태값 이하만 출력됨
- template 영역에 siteList를 사용한 목록 출력
- 컴포넌트 마운트시 axios 호출 후 리스트 값을 siteList에 업데이트
- template에 업데이트된 사이트 목록 확인
이제 코드를 작성해보겠습니다. computed는 nuxtjs 환경을 가정하여 작성했으며 composition API를 사용한 computed() 메소드를 사용한 예제입니다. (Vue 2의 경우 options API와 동일)
<template>
<input v-model="maxSize.value" type="number" />
<table>
<tr v-for="item in getSiteList" :key="item.id">
<td>{{ item.siteName }}</td>
</tr>
</table>
</template>
<script>
import { ref, reactive, computed, onMounted, useContext } from '@nuxtjs/composition-api';
export default {
setup() {
const maxSize = ref(10);
const siteList = reactive([])
const { $axios } = useContext()
const getSiteList = computed(() => {
return siteList.slice(0, maxSize.value)
})
onMounted(async () => {
try {
const response = await $axios.get('/api/test')
siteList = response.data ?? []
} catch(error) {
console.error('Error fetching site list: ', error)
}
})
return {
maxSize,
getSiteList
}
}
}
</script>
<input v-model="maxSize.value" type="number" />
<table>
<tr v-for="item in getSiteList" :key="item.id">
<td>{{ item.siteName }}</td>
</tr>
</table>
</template>
<script>
import { ref, reactive, computed, onMounted, useContext } from '@nuxtjs/composition-api';
export default {
setup() {
const maxSize = ref(10);
const siteList = reactive([])
const { $axios } = useContext()
const getSiteList = computed(() => {
return siteList.slice(0, maxSize.value)
})
onMounted(async () => {
try {
const response = await $axios.get('/api/test')
siteList = response.data ?? []
} catch(error) {
console.error('Error fetching site list: ', error)
}
})
return {
maxSize,
getSiteList
}
}
}
</script>
여기까지 computed를 사용한 예제가 작성 완료되었습니다.
위 예제는 간단한 비즈니스 로직의 앱이므로 computed의 강력한 리액티브 효과를 크게 경험할 수는 없습니다. 만약 더 많은 복잡한 로직이 추가되고 다양한 변수와의 종속 관계가 추가되거나 더 많은 비동기 호출 및 이벤트가 사용된다면 computed를 사용하였을 경우와 아닐 경우의 차이를 더 체감하실 수 있을 것입니다.
마치면서
코드를 작성하면서 어떻게 작성하는지를 아는 것도 중요하지만 왜 사용하는지와 어떤 장점과 단점이 있는지 나아가 왜 이렇게 작성하는지를 고민하면서 코드를 작성하고 이해하는 습관도 필요할 것입니다. 여기까지 computed 속성에 대하여 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
