react-hook-form의 watch와 getValues

watch와 getValues의 차이점

watch는 리렌더링이 일어나고 getValues는 리렌더링이 일어나지 않는다.
watch는 실시간 변화를 구독하지만 getValues는 실행될 시점에 저장되어있는 값을 가져올 뿐이다.

만약 api응답 값과 현재 input의 값이 일치하는지에 대한 조건을 판별할 때,

// api로 받아온 email
// react-hook-form의 함수 watch, getValues

email === watch('email') // 일치 여부 실시간 추적 가능
email === getValues('email') // 일치 여부 실시간 추적 불가능

위의 경우는 watch를 쓰는 것이 좋겠다.

formState의 isDirty

그런데 하나의 form에 여러 개의 input이 있고 form에서 하나의 input이라도 수정이 된 경우에 submit을 활성화시키는 등의 기능을 구현할 때가 있을 것이다.
이때도 똑같이 watch와 api응답값과 하나한 비교해주며 실시간 추적을 해도 되지만
formState: { isDirty } 를 사용한다면 defaultValues만 잘 적용을 시켜주면 저 함수 하나로 form에 수정이 있었는지 없었는지 실시간으로 알 수 있다.

간혹 input 자체가 optional이어서 빈 문자열을 보낼 수도, undefined 또는 null을 보낼 수도 있는 경우, 조건문을 작성하기가 까다로워질 수 있다. 이 때 isDirty를 쓰면 간편하다.