watch와 watchEffect의 차이점은 무엇인가요?

Question

Accepted Answer

둘 다 반응형 변경에 응답하여 부수 효과를 실행하지만, 의존성을 지정하는 방식과 제공하는 정보가 다릅니다. 부수 효과(API 호출, 로깅, 수동 DOM 작업)에 사용하세요 — 값을 파생하는 데는 **사용하지 마세요**(그것은 `computed`입니다). ## watch — 명시적 소스, 이전 값 + 새 값 제공 ```vue ``` `watch`는 지정한 **특정** 소스를 감시하고, 그 소스가 변경될 때만 콜백을 실행하며, **이전 값과 새 값**을 제공합니다 — 두 값을 비교하거나 특정 상태 조각에 반응해야 할 때 유용합니다. ## watchEffect — 자동 의존성 추적, 즉시 실행 ```vue ``` `watchEffect`는 내부에서 사용된 모든 반응형 값을 **자동으로 추적**하고(소스 목록 없음), 설정 시 **즉시 실행**됩니다(이후 의존성 변경 시 다시 실행). 이전/새 값은 없습니다. ## 나란히 비교 ```text watch watchEffect 의존성 명시적 (직접 지정) 자동 (사용에서 추적) 즉시 실행? 아니오 (immediate:true 제외) 예 이전 + 새 값? 예 아니오 적합한 경우 특정 상태에 반응, 여러 값에 의존하는 이전 값 필요 효과 실행 ``` ## 유용한 watch 옵션 ```js watch(source, cb, { immediate: true, // 즉시 한 번 실행 (watchEffect처럼) deep: true, // 중첩 객체 변경 감시 }); watch([a, b], ([newA, newB]) => {}); // 여러 소스 감시 ``` ## 왜 중요한가 올바른 도구를 선택하면 반응형 부수 효과가 깔끔하게 유지됩니다: 파생 값에는 **`computed`**, 특정 소스에 반응하거나 이전/새 값을 비교해야 할 때는 **`watch`**(예: id 변경 시 페칭), 여러 값에 의존하며 자동으로 추적해야 하는 효과에는 **`watchEffect`**를 사용합니다. 파생을 위해 watcher를 잘못 사용하는 것(`computed` 대신)은 흔한 안티패턴입니다.