[React-Hook-Form] watch ,reset ,setValue

 

useHookForm은 useQuery와 더불어 가장 만족한 라이브러리로 뇌의 재사용을 위해 기재해놔야겠다..

 

#SetValue

setValue(fieldName, value, options);

 

setValue의 매개변수는 'fieldName' 타겟필드명 , 변경할 값 , "option shouldValue : true" 로 옵션 값을 설정하여 유효성 검사도 추가로 가능하며, 폼의 유효성 상태를 즉시 반영 하고 싶을 때 사용한다. 

 

 

#reset

reset(); // 전체 리셋
reset({'fieldName' : '변경할 값 '}) // 특정 필드 값 초기화

 

폼 제출하거나 값을 특정 값으로 초기화 시킬 때 주로 사용한다. 

 

 

#Watch

const fieldValue = watch(fieldName);
const allValues = watch();

 

watch의 핵심 키워드는 "관찰" 이다.

watch는 현재 Value값을 "관찰"하며 해당 value가 변경되면 포함된 컴포넌트들에 대해 랜더링 유발한다.

 

defaultValue : {
    userName : '',
    userICon : '',
    userPassword : '',
    userContents : ''
    ....
}

 

유의점은 allValues 같이 watch() 전체 value를 관찰하게 된다면 예로 위의 userName만 변경되게 되어도 userIcon ,userPassword 등 각 name을 가진 Input 컴포넌트가 죄다 재 랜더링 되게 된다. 

 

불필요한 랜더링이 발생하여 성능 문제로 이어질 수 있기 때문에 주의가 필요하다.

개인적으로는 이땐 watch보다 getValue()를 통해 이전 데이터를 유지시키는 것이 더 바람직 할 것이다.