Q1: Vue.js에서 `watch`와 `computed`는 각각 무엇인가요?
- `computed`: 의존하는 데이터가 변경될 때 자동으로 계산된 값을 반환하는 반응형 속성입니다. 주로 복잡한 계산 결과를 효율적으로 캐싱할 때 사용합니다.
- `watch`: 특정 데이터나 계산된 값의 변화를 감지하여 그에 따라 부수 효과(side effect)를 실행하는 데 사용되는 옵저버입니다.
---
Q2: `computed`와 `watch`의 주요 차이점은 무엇인가요?
- `computed`는 반환값을 기반으로 반응형 계산을 수행하며, 결과를 캐싱합니다. 따라서 데이터가 바뀌지 않으면 계산을 다시 하지 않습니다.
- `watch`는 데이터가 변경될 때마다 특정 콜백 함수를 실행하며, 반환값을 캐싱하거나 사용하지 않습니다. 주로 비동기 작업이나 부수 작업을 처리할 때 적합합니다.
---
Q3: 언제 `computed`를 사용하고, 언제 `watch`를 사용해야 하나요?
- `computed`: 데이터 기반으로 동적으로 바뀌는 값이 필요하고, 그 값이 여러 곳에서 재사용되거나 복잡한 계산이 필요한 경우.
- `watch`: 데이터 변경 시 API 호출, 로깅, 데이터 저장 등 부수 작업을 수행해야 할 때.
---
Q4: `computed`는 내부적으로 어떻게 작동하나요?
- 내부적으로 의존하는 반응형 데이터의 변화를 추적해 변경 시에만 계산을 다시 수행합니다. 결과를 캐싱하므로 불필요한 재연산을 방지합니다.
---
Q5: `watch`는 어떤 방식으로 데이터 변화를 감지하나요?
- Vue의 반응성 시스템을 사용해 특정 데이터나 계산값의 변화를 구독하고, 변화 발생 시 지정한 콜백을 실행합니다.
---
Q6: `computed`에서 부수 효과(side effect)를 실행할 수 있나요?
- 권장하지 않습니다. `computed`는 순수 함수로 설계되어야 하며, 부수 효과는 `watch`를 통해 처리하는 것이 적절합니다.
---
Q7: `watch`에서 초기값 실행이 가능한가요?
- 네, `{ immediate: true }` 옵션을 사용하면 워치어가 등록될 때 콜백이 즉시 실행됩니다.
---
Q8: `computed`와 `watch`는 동시에 사용할 수 있나요?
- 네, `computed`로 값을 계산하고 그 값을 `watch`로 관찰하여 데이터 변경에 따른 부수 효과를 처리할 수 있습니다.
---
요약:
- `computed`: 계산된 값을 반환하고 캐싱하며, UI 렌더링에 적합한 반응형 속성
- `watch`: 데이터 변경 감지 시 콜백 실행, 비동기 작업 및 부수 효과 처리에 적합한 옵저버
Vue.js에서 `watch`와 `computed`는 모두 반응형 데이터 처리에 사용되지만, 그 목적과 사용 방식에서 중요한 차이점이 있습니다. 이 두 기능은 Vue.js의 반응형 시스템을 활용하여 데이터의 변화를 감지하고 그에 따라 UI를 업데이트하는 데 도움을 줍니다. 아래에서 각각의 기능에 대해 자세히 설명하겠습니다. 1. Computed Properties 정의 : `computed`는 Vue 인스턴스의 <a href='https://sangseek.com/sangseeks/데이터 속성/ko'>데이터 속성</a>을 기반으로 계산된 값을 반환하는 속성입니다. 이 속성은 종속된 데이터가 변경될 때만 다시 계산됩니다. 특징 : - 캐싱 : `computed` 속성은 종속된 데이터가 변경되지 않는 한, 이전에 계산된 값을 캐시합니다. 즉, 성능 최적화에 유리합니다. - 반응형 : `computed`는 Vue의 반응형 시스템에 의해 자동으로 업데이트됩니다. 종속된 데이터가 변경되면, `computed` 속성도 자동으로 다시 계산됩니다. - 읽기 전용 : 기본적으로 `computed`는 읽기 전용입니다. 그러나 setter를 정의하여 값을 설정할 수도 있습니다. 사용 예 : ```javascript new Vue({ data() { return { firstName: 'John', lastName: 'Doe' }; }, computed: { fullName() { return `${this.firstName} ${this.lastName}`; } } }); ``` 위의 예에서 `fullName`은 `firstName`과 `lastName`이 변경될 때만 다시 계산됩니다. 2. Watchers 정의 : `watch`는 Vue 인스턴스의 데이터 속성의 변화를 감지하고, 그 변화에 따라 특정 작업을 수행하는 데 사용됩니다. 주로 비동기 작업이나 복잡한 로직을 처리할 때 유용합니다. 특징 : - 비동기 작업 : `watch`는 데이터가 변경될 때마다 특정 함수를 실행할 수 있습니다. 이로 인해 API 호출, 타이머 설정 등 비동기 작업을 처리하는 데 적합합니다. - 명시적 : `watch`는 특정 데이터 속성을 명시적으로 감시하며, 그 속성이 변경될 때마다 지정된 <a href='https://sangseek.com/sangseeks/콜백/ko'>콜백</a> 함수를 실행합니다. - 다양한 데이터 타입 : `watch`는 객체, 배열 등 다양한 데이터 타입을 감시할 수 있으며, 깊은 감시(deep watch)도 지원합니다. 사용 예 : ```javascript new Vue({ data() { return { question: '', answer: '질문을 입력하세요.' }; }, watch: { question(newQuestion) { this.answer = '대기 중...'; this.getAnswer(newQuestion); } }, meth<a href='https://sangseek.com/sangseeks/ods/ko'>ods</a>: { getAnswer(question) { // API 호출 등의 비동기 작업 setTimeout(() => { this.answer = '답변: ' + question; }, 1000); } } }); ``` 위의 예에서 `question`이 변경될 때마다 `getAnswer` 메소드가 호출되어 비동기 작업을 수행합니다. 요약 - 목적 : - `computed`: 데이터 기반의 계산된 값을 제공하고, 캐싱을 통해 성능을 최적화합니다. - `watch`: 데이터의 변화를 감지하고, 그에 따라 특정 작업(주로 비동기 작업)을 수행합니다. - 사용 시나리오 : - `computed`: UI에 표시할 계산된 값을 필요로 할 때 사용합니다. - `watch`: 데이터 변경에 따라 API 호출이나 복잡한 로직을 실행해야 할 때 사용합니다. 이러한 차이점을 이해하고 적절한 상황에 맞게 `computed`와 `watch`를 활용하면 Vue.js 애플리케이션의 성능과 유지보수성을 높일 수 있습니다.
