WEB/React

[Capsule] react-hook-form 적응기 (2)

orange_mj 2024. 5. 29. 03:02

 

이번엔 AudioRef 에 대한 리펙터링을 진행할 것이다. 

 

컴포넌트의 간단한 구조는

> WritePad
     > Letter
           > ImageUpload 
                 >  <img src=imageUrl />
                 >  <img type='file' />
           > Recode
           > 이미지 첨부 Button

가장 상위의 컴포넌트에 선언되는 form 의 default value 에 audio Ref 값을 추가해준다.

 

그리고 나서 복잡하게 컴포넌트의 props 로 전달하고 있던 부분을 모두 제거한다.

그 안에 있는 Letter 컴포넌트에서도 제거

 

 

react-hook-form 은 혁신 인 것 같다.. 이게 진리고 이게 답이다.. 

코드가 점점 더 깔끔해지고 있고, 컴포넌트 사이에 props 없이 값을 watch 함수 하나로 사용할 수 있다는 것이 너무 편리하고,

코드를 더 클린하게 한다. watch , getValue, onSubmit 등의 useFormData 에 있는 함수를 구현할 수 있는 사람이 되고 싶다. 

댓글수0