Watch
반응형 데이터의 상태가 변경되었음을 감지하여 작업을 수행해야하는 경우가 있는데, Composition API의 watch함수를 사용하여 변경되었을 때 작업을 수행하게 할 수있다.
watch함수
코드 복사하기
→ watch(상태를 체크할 변수, ( 새 값, 이전값 ) ⇒ {});
•
확인
이전 데이터인 OldValue는 비어있었기 때문에 공백이다.
중요한 것은 message의 상태가 바뀔 때, watch가 실행이 되었다는 것이다.
상태가 변경이 되었을 때, DOM / API / state 변경이라든지 함수를 호출할 수 있다.
watch 함수의 첫 번째 매개변수로는,
ref, reactive, computed, getter, array 타입을 받을 수 있다.
Watch 함수 첫 번째 매개변수로 함수도 넣을 수 있다.
코드 복사하기
→ 현재 형태
watch (() => 함수, (새값, 이전값) ⇒ {로직});
•
확인
watch 함수로 상태를 추적하는 로직이 x + y의 합이였고,
예전 값과 새 값이 변경이 될 때 console.log가 호출되는 것을 볼 수 있다.
배열을 추적하기
코드 복사하기
→ 첫 번째 매개변수로 배열을 선언하고
→ 콜백 함수로 매개변수를 새 값만 추적하게 할 수 있다. (변경된 배열만 추적, 하지만 매개변수를 두개 놓으면 이전 값도 추적이 가능하다 ⇒ 메소드 오버로딩이 가능하다라는 뜻)
•
확인
배열이 변경이 되면 배열 자체를 추적하게 할 수 있다.
오브젝트 상태 추적
오브젝트 전체 추적
코드 복사하기
watch함수 첫 번째 매개변수로 오브젝트가 올 수 있다.
오브젝트의 속성이 변경이 되면 콜백 함수가 호출이 된다.
•
확인
좋은 기능이지만, count가 변경이 될 때 다른 모든 것들을 새로 그리고 싶지 않을 때가 있을 수도 있다.
그럼 추적 매개변수로 obj.count를 넣으면 될까??
obj 부분 추적
코드 복사하기
watch 첫 번째 매개변수로, 오브젝트의 속성을 넣을 수 있지만 이게 정말 추적이 될수 있을까??
•
확인
반응형 오브젝트의 속성 타입은 일반 데이터이다.
오브젝트의 속성도 추적가능하게 하기
코드 복사하기
속성을 추적하게 하고 싶으면 람다식으로 getter함수를 호출하면 된다.
•
확인
getter함수로 첫 번째 매개변수로 넣어주면 추적이 가능하다.
오브젝트 자체를 추적한다면?!
코드 복사하기
오브젝트 자체를 추적하게 하고,
이전값과 새 값을 추적하게 한다면 무슨 일이 벌어질까?
•
확인
그냥 알고 있으면 좋을듯
Deep Option
반응형 오브젝트를 watch하면 암시적으로 깊은 감시자가 생김. 즉 깊은 감시자는 속성과 내부 객체에 대한 속성까지 감시하고 있음
코드 예제
코드 복사하기
반응형 객체 내부의 객체는 추적할 수 있을까?
•
확인
추적이 된다.!
추적되고 있는 반응형 객체의 내부 객체가 작동하는 방식
코드 복사하기
getter 함수로 내부 객체를 감시하는 것은 어떻게 작동할까?
•
확인
추적되고 있는 반응형 객체의 내부객체의 속성이 변경이 되어도,
콜백 함수는 호출 되지 않는다.
그렇다고 한다.
getter함수는 getter로 받은 함수가 바뀌었냐 안바뀌였냐를 체크하는 것!!
콜백 함수의 동작 타이밍 immediate
콜백 함수 특성상 변경이 생겼을 때 함수가 호출되는 것이 그 본연의 의미이겠지만, 상황에 따라서는 바로 변경되지 않고 바로 실행되길 원할 수도 있다.
코드예제
코드 복사하기
watch함수의 세 번째 매개변수로 { immediate: true } 가 설정이 되면 실행시점이 변경시점이 아니라 반응형 데이터 로드시점이 된다.
•
확인
이렇게 페이지가 로드되자마자 바로 실행되는 것을 볼수있다.
Computed VS Watch
•
computed
종속 관계를 자동으로 세팅하고자 할 때는 computed를 구현하는 것이 좋다.
◦
위의 예시처럼 reverseMessage는 message 값에 따라 결정된다. 하지만 이 관계가 복잡해지면 오류를 일으킬 가능성이 크다.
•
watch
◦
인스턴스 변경 시점에 api 호출이나 다른 비즈니스 로직을 더 복잡하게 구현할려고 하면 watch함수가 더 적합할 수 있다.
Watch VS WatchEffect
1. watch
특정 반응형 데이터 변화를 감지하고 이에 따라 특정 작업을 수행할 때 사용한다.
그래서 명시적으로 추적할 반응형 데이터를 명시해야된다.
2. watchEffect (최초 로드시에 실행된다)
추적할 데이터를 명시하지 않고도, 반응형 데이터를 기반으로 어떤 작업을 수행하고 싶을 때 사용한다.
콜백 함수 내에서 사용된 모든 반응형 데이터를 자동으로 추적한다. 이 함수내의 데이터가 변경이 되면 'watchEffect'가 실행된다.
JavaScript
복사
코드 예제
코드 복사하기
title과 contents가 입력가능한 textarea를 만들어서 테스트 해보자.
•
확인
textarea는 watchEffect 함수 내부에 있는 반응형 데이터이고,
변경이 생길 때 마다 watchEffect 함수가 호출 된다.
save로직 구현
코드 복사하기
→ 보는 바와 같이 save함수를 따로 만들어서 watchEffect 안에 넣어주면 내부 데이터 변경시 호출이 된다.
•
submit.prevent
폼 태그 내부의 submit이 일어나면 디폴트 설정이 새로고침이다.
그래서 입력했던 내용이 다 날라가게 된다.
이 때 사용할 수 있는 것이 @submit.prevent이다.
•
수정
코드 복사하기