Front-End프로그래밍

[Vue3] watch()의 주요 옵션 및 예제코드

떠돌이개발자

✅ watch()의 주요 옵션

1. 🔁 immediate: true

  • 감시가 시작될 때, 즉시 콜백을 한 번 실행합니다.
  • 기본값은 false입니다 (값이 바뀔 때만 실행).
  • 주로 “컴포넌트가 마운트되자마자 뭔가 실행하고 싶을 때” 사용합니다.

예시:

watch(
  () => searchParams.value.startDate,
  (newVal, oldVal) => {
    console.log('시작 날짜 변경됨:', newVal);
  },
  { immediate: true }
);

✅ 결과: searchParams.value.startDate가 처음 값일 때도 한 번 실행됩니다.

2. 🧬 deep: true

  • 객체나 배열의 내부 속성까지 감시하고 싶을 때 사용합니다.
  • 기본값은 false입니다.
  • Vue의 반응형 시스템은 객체의 “참조”가 바뀌지 않으면 내부 속성 변경을 감지하지 않기 때문에, 이 옵션이 필요합니다.

예시:

watch(
  () => searchParams.value,
  (newVal, oldVal) => {
    console.log('searchParams 내부 속성이 바뀜');
  },
  { deep: true }
);

✅ 결과: searchParams.value.startDate = '...'처럼 내부 속성만 바뀌어도 감지됩니다.

3. 🕒 flush: 'pre' | 'post' | 'sync'

  • watch 콜백의 실행 타이밍을 제어합니다.
값설명
'pre'DOM 업데이트 전에 실행 (기본값)
'post'DOM 업데이트 후 실행 (이벤트 이후 렌더 완료 후)
'sync'반응 데이터가 바뀌는 즉시 동기적으로 실행

예시:

watch(
  () => someValue.value,
  () => {
    console.log('업데이트 완료 후 실행됨');
  },
  { flush: 'post' }
);

옵션 전체 구조

watch(
  source,
  callback,
  {
    immediate: true,
    deep: true,
    flush: 'post',
  }
);

실전 팁

  • immediate는 watch을 onMounted() 대용으로 사용할 때 유용합니다.
  • deep은 reactive() 객체를 감시할 때 자주 사용됩니다.
  • flush: 'post'는 DOM 업데이트가 끝난 후에 콜백을 실행하고 싶을 때 사용됩니다. 예를 들어, 변경된 값을 기반으로 DOM을 측정해야 하는 경우.

watch(
  [() => props.rows, () => route.path],
  (value) => {

  });

1. watch(sourceArray, callback)

  • watch()는 하나 이상의 **반응형 소스(source)**를 감시합니다.
  • 여기서는 sourceArray로 2개의 소스를 배열로 넘기고 있습니다:
    • props.rows
    • route.fullPath

각각의 요소 설명

▶ () => props.rows

  • 이건 부모 컴포넌트에서 전달된 props.rows를 감시합니다.
  • 즉, 부모가 props로 넘긴 데이터가 바뀌면 감지합니다.

▶ () => route.fullPath

  • Vue Router의 route.fullPath를 감시합니다.
  • 경로(페이지 주소)가 바뀌면 이 watch가 실행됩니다.

두 값 중 하나라도 바뀌면 콜백이 실행됩니다.

콜백 함수: (value) => { ... }

  • value는 배열입니다.
  • 배열 안에는 각각의 소스의 **새로운 값(new value)**이 순서대로 들어갑니다.
(value) => {
  const [newRows, newFullPath] = value;
  console.log('새 rows:', newRows);
  console.log('새 경로:', newFullPath);
}

🔸 이전 값이 필요하면 (newValues, oldValues)처럼 받을 수 있습니다:

(newValues, oldValues) => {
  const [newRows, newFullPath] = newValues;
  const [oldRows, oldFullPath] = oldValues;
}

전체 예시 정리

watch(
  [() => props.rows, () => route.path],
  ([newRows, newFullPath], [oldRows, oldFullPath]) => {
    console.log('rows 변경:', oldRows, '→', newRows);
    console.log('경로 변경:', oldFullPath, '→', newFullPath);
  }
);

정리

요소설명
watch([...])여러 반응형 데이터를 동시에 감시
() => props.rowsprops 값 변경 감시
() => route.fullPath라우터 경로 변경 감시
콜백 인자 value배열 형태의 새로운 값들
콜백 인자 (newVal, oldVal)필요하면 이전 값도 함께 받을 수 있음

이 방식은 라우터 주소가 바뀌거나, 부모에서 props로 내려준 리스트가 바뀔 때 그에 따른 동작을 처리하는 데 매우 유용합니다.

Related Posts

error: Content is protected !!