[멋쟁이사자처럼] 부트챌린지: 11시간만에 트위터만들기 - computed, watch, methods

 

오늘은 `Computed`, `Watch`, `Methods`를 배웠다. 이 셋은 모두 데이터의 변화에 반응하거나 특정 로직을 실행하기 위해 사용하는 옵션으로, 각각의 사용 시기는 때와 상황, 그리고 로직의 복잡함에 따라서 다르다고 할 수 있다.

 

오늘부터 인프런 챌린지를 시작하여 강의 및 공부, 과제까지 스톱워치를 통하여 세볼 예정이다.

 

 

오늘 배운 것

Computed

`computed`는 데이터 변화에 따라 자동으로 값을 계산하는 속성으로, 데이터 변화에 민감하게 반응해 UI를 갱신한다. 특이점으로는 해당 계산을 캐싱하고 값이 바뀔 때마다 재계산하는 특성이 있다는 것이다. 이 때문에 속도가 빠르고(성능이 좋고) 코드 가독성도 높아진다.

 

예제 코드는 다음과 같다. 기존 포스팅 방식과 비슷하게 Vue 2와 Vue 3 스타일인 `Options API`, `Composition API` 방식으로 나누어 보인다.

 

// 1. Options API 방식 (기존 Vue 2 스타일)
export default {
  data() {
    return {
      price: 10000,
      qty: 2
    };
  },
  computed: {
    // 의존성(price, qty)이 변하지 않으면 계산을 건너뛰고 캐싱된 값을 반환함
    totalPrice() {
      return this.price * this.qty;
    }
  }
};

// 2. Composition API 방식 (Vue 3 권장 스타일)
import { ref, computed } from 'vue';

const price = ref(10000);
const qty = ref(2);

// computed() 함수로 감싸서 선언하며, 내부 ref 값(.value)이 바뀔 때만 재연산함
const totalPrice = computed(() => {
  return price.value * qty.value;
});

 

 

Methods

흔히 React나 Vanilla JS에서 볼 수 있는 함수라고 보면 된다. 이름도 이에 따라 정직하게 메서드. 데이터 처리나 이벤트 핸들링 등의 다양한 작업을 수행하며, 함수의 특징을 전부 가지고 있다 보면 된다. 함수에 대해서는 아래 포스트를 살펴보면 된다.

 

[Java 풀스택 개발자] JavaScript 완전 정복!

[Java 풀스택 개발자] JavaScript 완전 정복!

 

이에 따라 장단점은 개발자 본인이 어떻게 메서드를 짜느냐에 달려 있다. 사용자가 로직을 직접 짜야하므로 역량을 요구한다는 점에서 까다로울 수는 있지만, 그만큼의 자유도와 복잡한 비즈니스 로직 또한 보증 되어 있다.

 

 

예제 코드는 다음과 같다.

// 1. Options API 방식 (기존 Vue 2 스타일)
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    // 버튼을 클릭하는 등 개발자가 '명시적으로 호출'할 때만 캐싱 없이 실행됨
    increaseCount(amount) {
      this.count += amount;
    }
  }
};

// 2. Composition API 방식 (Vue 3 권장 스타일)
import { ref } from 'vue';

const count = ref(0);

// 특별한 옵션 없이, 우리가 아는 '일반 자바스크립트 함수'로 선언해서 사용함
const increaseCount = (amount) => {
  count.value += amount;
};

 

Watch

특정 데이터의 변화를 감지해 비동기 작업을 수행한다. React에서는 `useEffect()` 같은 것이라 이해하면 쉽다. 특정 데이터의 변화를 감지하여 비동기 처리나 외부 시스템 연동 같은 명령형 부수 효과를 캐싱없이 수행한다. 속도는 이 때문에 `computed` 보다 느리며, `methods`와 비교할 때도 느릴 수도 있다. 다만 유연성이 좋고 비동기 작업 수행도 가능하다.

 

// 1. Options API 방식 (기존 Vue 2 스타일)
export default {
  data() {
    return {
      userId: 1
    };
  },
  watch: {
    // userId 값이 변경될 때마다 이 함수가 캐싱 없이 '자동'으로 실행됨
    userId(newId, oldId) {
      console.log(`유저 아이디가 ${oldId}에서 ${newId}로 바뀜`);
      this.fetchUserData(newId); // 외부 API 호출 같은 부수 효과 수행
    }
  }
};

// 2. Composition API 방식 (Vue 3 권장 스타일)
import { ref, watch } from 'vue';

const userId = ref(1);

// watch() 첫 번째 인자에 감시 대상 ref를 넣고, 두 번째 인자에 콜백 함수를 작성함
watch(userId, (newId, oldId) => {
  console.log(`유저 아이디가 ${oldId}에서 ${newId}로 바뀜`);
  fetchUserData(newId); // 캐싱 없이 매번 처음부터 끝까지 실행
});

 

 

`watch`와 `computed`의 비교를 직접적으로 설명하면 다음 표와 같다.

 

구분	computed	watch
목적	기존 데이터로 새로운 값을 계산	데이터 변경 시 부수 효과(Side Effect)를 실행
동작 방식	선언형	명령형
캐싱	O	X
인자	X	O(이전 값과 새 값을 인자로 받음)
용도	쇼핑몰 총금액, 필터링된 배열, 가공된 텍스트	외부 API 호출, 로컬스토리지 저장, 타이머 작동
동작 타이밍	종속된 데이터가 변경될 때 동기적으로 연산	감시하는 데이터가 변경될 때 비동기적으로 실행

 

`computed`는 인자를 받을 수 없다는 부분에 집중해보자. `computed`는 함수가 아니라 속성(property)로 취급하기 때문에 인자를 받을 수 없다. 이 덕분에 캐싱이 가능한건데(즉, 수식을 캐싱으로 받기 위해서는 함수가 아니라 속성, 즉 값이어야 한다), 동시에 인자를 넣을 수 없다는 건 복잡한 계산 등은 불가능하단 의미가 된다. 따라서 그러한 부분들은 `watch`나 `methods`가 담당할 수 있다.

 

오늘의 실습은 다음에 다룰 예정인 `v-if`를 사용한 것만 추가되어 이만 생략한다.