Develop/Vue

Vue.js computed 속성

DevPi 2025. 6. 5. 14:47
반응형

 

Vue.js를 배우다 보면 computed라는 개념을 필수적으로 마주하게 됩니다. computed는 Vue의 핵심 기능 중 하나로, 복잡한 연산을 효율적으로 처리하고 뷰(View)에 반영하는 역할을 합니다.

이번 포스팅에서는 computed가 무엇인지, 왜 필요한지, 그리고 실용적인 사용법까지 알아보겠습니다.

computed란?

Vue의 computed 속성은 종속된 반응형 데이터에 따라 자동으로 다시 계산되는 속성입니다. 보통 기존 데이터로부터 파생된 값을 계산할 때 사용됩니다.

특징

  • 종속된 데이터가 변경되기 전까지는 계산 결과를 캐싱함
  • 관련된 데이터가 변경될 때만 다시 계산함
  • 일반적인 메서드(methods)와 다르게 호출 형태가 아니라 속성처럼 접근

기본 사용법

<template>
  <div>
    <p>이름: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}
</script>

여기서 fullName은 firstName과 lastName에 의존하고 있으며, 이 둘이 바뀔 때만 다시 계산됩니다.

computed vs methods 차이

구분computedmethods

호출 방식 속성처럼 접근 함수처럼 호출
캐싱 여부 종속된 데이터가 바뀌기 전까지 캐싱 호출할 때마다 실행
주 사용 목적 파생된 데이터 계산 이벤트 핸들러, 일반 로직 실행
  • computed는 결과를 캐싱하기 때문에 연산량이 많은 경우 효율적입니다.
  • methods는 항상 새로 실행되므로 매번 최신 값을 보장하지만, 리소스 낭비가 있을 수 있습니다.

computed 속성 활용 예시

조건부 텍스트 표시

<template>
  <div>
    <p>{{ statusMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false
    }
  },
  computed: {
    statusMessage() {
      return this.isLoggedIn ? '로그인 완료' : '로그인 필요';
    }
  }
}
</script>

리스트 필터링

<template>
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple', available: true },
        { id: 2, name: 'Banana', available: false },
        { id: 3, name: 'Cherry', available: true }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.available);
    }
  }
}
</script>

computed 사용 시 주의할 점

  • 함수형 프로그래밍처럼 작성해야 합니다.
    • computed 함수는 부수 효과(side effect)가 없어야 합니다.
    • 단순히 값을 계산해 반환하는 역할에 집중해야 합니다.
  • 무거운 연산에 적합합니다.
    • 복잡하고 비용이 큰 연산 결과를 캐싱해 성능을 최적화할 수 있습니다.
  • 의존성 관리를 신경 써야 합니다.
    • computed는 선언된 데이터에 의존성이 자동으로 추적되므로, 불필요한 데이터 접근을 줄이는 것이 좋습니다.

결론

Vue의 computed 속성은 데이터로부터 파생된 값을 효과적으로 관리하는 방법입니다. 캐싱 기능 덕분에 퍼포먼스 최적화에 유리하며, 뷰에 반응적으로 값을 표시할 때 매우 유용합니다.

특히, 복잡한 로직을 템플릿에 직접 작성하지 않고 깔끔하게 분리할 수 있어 코드 가독성도 높아집니다. Vue 프로젝트에서 computed를 적극적으로 활용해 보길 추천합니다.

반응형