Open SoYoung210 opened 3 years ago
안녕하세요 질문이 있습니다..! react-hook-form github 소스를 clone받고 봤는데도 올려주신 소스들은 찾을수가 없는데요.. 예를들어 watch 구현소스를 보고싶은데 어디서 볼 수 있을까요?
@kwonth211 안녕하세요,
본문의 코드와 관련 블로그 글이 react-hook-form v6를 기준으로 작성되어, v7인 지금은 많은 내용이 outdated된 것으로 보입니다.
이 글을 쓸때는 useForm
return부터 하나하나 따라가는 식으로 파악했습니다. ㅎㅎ
@SoYoung210 답변 감사합니다!
react-hook-form의 동작방식은 HTML Element를 내부
ref
로 관리하는 방식이다.ref.addEventListener
를 통해 이벤트를 등록하고, UnMount(혹은 unregister)시점에 이벤트 리스너를 제거한다.watch
입력의
onChange
mode에서 유효성 검사가 필요할 때는watch
(oruseWatch
)를 사용한다.watch
를 수행하면watchFields.add(fieldName);
에 의해 fieldName에 해당하는 input을watchFieldsRef
에 추가한다.이벤트 리스너에 등록되는
handleChangeRef.current
함수에서isFieldWatched
를 확인하여shouldRender
값을 결정한다. 이 값은shouldRenderBaseOnError
함수에 전달되어 true일 경우 ReRendering을 발생시키는updateFormState
함수를 호출한다.Controller
Controller는 외부 라이브러리 의존성 등으로 Controlled Component를 사용할 수 밖에 없는 경우 사용하는 Component이다.
useController
Controller
와 같은 기능을 hooks로 사용할 수도 있다.