Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크로, 데이터 바인딩과 컴포넌트 기반 아키텍처를 제공합니다. 이를 통해 개발자는 간편하게 상호작용하는 웹 애플리케이션을 구축할 수 있습니다.

Vue.js에서는 computed 속성을 사용하여 계산된 데이터를 정의할 수 있습니다. 이 속성은 기존의 데이터를 기반으로 새로운 데이터를 자동으로 계산 및 갱신하는 역할을 합니다. computed 속성은 원본 데이터에 영향을 주지 않으며 재사용성과 성능 최적화에 매우 유용합니다.

컴퓨티드 속성의 정의

컴퓨티드 속성은 Vue 인스턴스 안에 computed 속성으로 정의됩니다. 이 속성은 get 메서드와 set 메서드로 구성되며, get 메서드는 계산된 속성의 값을 반환하고, set 메서드는 컴퓨티드 속성의 값을 변경할 때 사용됩니다.

var vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      // get 메서드로 fullName 값을 계산
      get: function() {
        return this.firstName + ' ' + this.lastName;
      },
      // set 메서드로 fullName 값을 변경
      set: function(value) {
        var names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
  }
});

위의 예시에서 fullName은 get 메서드를 사용하여 firstName과 lastName 값을 조합해 계산합니다. set 메서드를 사용하여 fullName 값을 변경할 경우, firstName과 lastName 값을 적절히 분리하여 변경합니다.

컴퓨티드 속성 사용하기

컴퓨티드 속성은 {{ ... }}를 사용하여 템플릿에서 사용할 수 있습니다.

<div id="app">
  <p>Full Name: {{ fullName }}</p>
</div>

위의 예시에서 fullName은 computed 속성으로 정의되었으므로, 템플릿에서 {{ fullName }}을 사용하여 값을 표시할 수 있습니다.

Vue 인스턴스가 생성될 때, fullName은 자동으로 계산되어 초기값이 표시됩니다. 또한, firstName 또는 lastName의 값이 변경될 때마다 fullName 값도 자동으로 갱신됩니다.

컴퓨티드 속성의 장점

컴퓨티드 속성은 다음과 같은 장점을 가지고 있습니다.

1. 재사용성: computed 속성은 여러 번 사용할 수 있으며, 코드의 중복을 줄이고 재사용성을 향상시킵니다.
2. 성능 최적화: 컴퓨티드 속성은 종속성이 변경될 때만 재계산되므로, 불필요한 계산을 피하고 성능을 최적화할 수 있습니다.
3. 가독성: 계산된 데이터를 computed 속성에 정의하면, 템플릿에서 결과값을 바로 사용할 수 있어 가독성을 향상시킵니다.

마무리

Vue.js에서 computed 속성을 사용하여 계산된 데이터를 간편하게 정의하고 사용할 수 있습니다. 컴퓨티드 속성은 코드의 중복을 줄이고 재사용성을 높이며, 성능을 최적화할 수 있습니다.

더 자세한 내용은 Vue.js 공식 문서에서 확인할 수 있습니다.