Vue.js에서 watch 톺아보기!

리액트로 프론트를 시작했다보니 두 프레임워크의 차이점을 발견하고나면 꽤나 신기하다.
Vue.js watch는 리액트에는 없는 개념이다.

데이터 변화에 대응하는 도구로 React의 useEffect와 개념적으론 비교할 수 있지만, 사용 방식이 상당히 다르다!

1. 개념

해당 데이터가 변경될 때 특정 작업을 수행할 수 있도록 해주는 강력한 도구다.

• Vue 컴포넌트 내에서 반응형 데이터(data, props 또는 computed 속성에 있는 데이터)를 감시(watch)
• 데이터 변화를 감지해 API 호출, 컴포넌트 업데이트, 복잡한 계산 등 로직을 쉽게 처리
• 복잡한 컴포넌트의 상태 관리

computed나 methods와 적절히 조합하여 사용하면 딱 좋당

2. watch의 기본 사용법

watch는 컴포넌트의 watch 옵션 안에 선언된다.
감시하려는 데이터와 그 데이터가 변경될 때 호출될 콜백 함수를 정의한다.

export default {
  data() {
    return {
      count: 0 // count 데이터가 변경될 때마다 watch에 정의된 콜백 함수가 실행된다.
    };
  },
  watch: {
    count(newVal, oldVal) { // 콜백 함수의 첫 번째 인자는 새 값(`newVal`), 두 번째 인자는 이전 값(`oldVal`)을 받게된다.
      console.log(`count 값이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
    }
  }
};

3. 즉시 실행(immediate)

기본적으로 watch는 감시하는 데이터가 처음 변경될 때만 실행된다.
처음 설정될 때도 콜백을 실행하고 싶다면immediate 옵션을 사용하면 된다.

export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count: {
      handler(newVal, oldVal) {
        console.log(`count 값이 ${oldVal}에서 ${newVal}로 변경되었습니다.`);
      },
      immediate: true
    }
  }
};

컴포넌트가 생성될 때 count의 초기 값에 대해 watch가 한 번 실행됩니다.

4. 깊이 감시(deep)

기본적으로 watch는 객체나 배열의 최상위 속성만 감시한다!
객체 내부의 속성이나 배열의 요소 변화를 감시하고 싶을떈 deep 옵션을 사용해야 한다.

export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 30
      }
    };
  },
  watch: {  // user 객체 내부의 속성(name 또는 age)이 변경될 때마다 watch 콜백이 실행된다.
    user: {
      handler(newVal, oldVal) {
        console.log('user 객체가 변경되었습니다:', newVal);
      },
      deep: true
    }
  }
};

5. 감시 대상이 여러 개인 경우

watch를 사용하여 여러 데이터를 감시할 수도 있습니다.

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      fullName: ''
    };
  },
  watch: {
    firstName(val) {
      this.fullName = `${val} ${this.lastName}`;
    },
    lastName(val) {
      this.fullName = `${this.firstName} ${val}`;
    }
  }  // firstName과 lastName을 감시하여 전체 이름을 업데이트할 수 있다.
};

여기서 firstName이나 lastName 중 하나라도 변경되면 fullName이 업데이트되는 것이다.

6. 특정 함수를 감시하는 경우

컴포넌트의 상태에 따라 동적으로 변경되는 값을 감시해야 할 때, watch에서 특정 함수를 지정하여 그 결과 값을 감시할 수 있다.

export default {
  data() {
    return {
      a: 1,
      b: 2
    };
  },
  computed: {
    sum() {
      return this.a + this.b;
    }
  },
  watch: {
    sum(newVal) {
      console.log(`합계가 ${newVal}로 변경되었습니다.`);
    }
  }
};

이 예제에서 a나 b가 변경되면 sum의 결과가 변경되고, 이에 따라 watch 콜백이 실행된다.

7. 비동기 작업 처리할 때 사용하는 방법

예를 들어, 사용자가 검색어를 입력할 때마다 API를 호출하고 싶은 경우에도 사용할 수 있다.

export default {
  data() {
    return {
      query: '',
      results: []
    };
  },
  watch: {
    query: {
      handler: _.debounce(function (newQuery) {
        this.search(newQuery);
      }, 500),
      immediate: true
    }
  },
  methods: {
    async search(query) {
      const response = await fetch(`/search?q=${query}`);
      this.results = await response.json();
    }
  }
};

query가 변경될 때마다 search 메서드를 호출하여 검색 결과를 가져온다.
내 사랑_.debounce를 사용해 사용자가 입력을 멈춘 후 500ms 후에 검색을 시작하도록 하여 API 호출 횟수를 줄였다.

8. watch의 주의 사항

• 부적절한 사용: 모든 상태 변화를 watch로 처리하면 코드가 완전 복잡해진다. 간단한 연산은 computed 속성을 사용하는 것이 낫다.
• 성능: deep 옵션을 남용하면 성능이 저하된다.