Vue 컴포넌트에서 'computed' 속성과 'watch' 옵션(또는 watch effect)은 모두 반응형 데이터의 변화에 따라 특정 로직을 수행할 수 있습니다. 이 둘의 주요 차이점을 설명하고, 각각 어떤 상황에 더 적합한지 실무 예시를 들어 설명해주세요.

네, Vue 컴포넌트에서 computed와 watch는 모두 반응형 데이터 변화에 반응하지만, 목적과 동작 방식에 차이가 있습니다.

computed는 종속성을 기반으로 계산된 값을 반환합니다. 즉, 종속된 데이터가 변경될 때만 다시 계산되고, 결과는 캐싱됩니다. 따라서 성능 최적화에 유리하며, 템플릿에서 데이터를 표시하거나 다른 computed 속성의 종속성으로 사용될 때 적합합니다. 예를 들어, 상품 가격과 할인율을 기반으로 최종 가격을 계산하는 경우에 computed를 사용하면 됩니다.

반면 watch는 특정 데이터의 변화를 감지하고, 그에 따른 부수 효과(side effect)를 수행합니다. 데이터 변경 시마다 실행되며, 비동기 작업이나 API 호출, 로깅 등과 같이 데이터 변경에 따라 다른 작업을 수행해야 할 때 유용합니다. 예를 들어, 검색어 입력 시 API를 호출하여 검색 결과를 업데이트하는 경우에 watch를 사용할 수 있습니다.

요약하자면, computed는 값을 계산하고 캐싱하는 데, watch는 데이터 변화에 따른 부수 효과를 처리하는 데 더 적합합니다.