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

 

컴포넌트의 간단한 구조는 

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

 

즉, 이미지를 보여줘야하는 곳과 이미지를 첨부해야 하는 곳의 위치가 다르기 때문에, 늘 그렇듯 Ref 를 사용했다. 

Ref 를 필요한 각 컴포넌트의 Props 로 보내주듯이 구현을 했다.

예를 들면 이렇게 말이다.

즉, react-hook-form 을 사용하고 있으면서 장점을 전혀 활용하고 있지 못했던 것이다. 

이렇게구현하면, 코드에 inputRef 가 남발한다. 

이렇게 가장 상위의 컴포넌트에서 props 사용해서 가장 하위의 컴포넌트까지 전달해주는 형식을 띄고 있는 것이다.

이를 해결하고자 react-hook form 을 적극 활용하여 

가장 상위의 컴포넌트(WritePad) 에 선언되는 폼에 default 값으로 fileRef 값을 추가해준다. 

 

그리고 사진에서 보이는 것과 같이 모든 fileinputRef 관련 코드를 삭제해도 무방하다. 
왜냐고? 리액트 훅 폼이 그렇게 지원해준다. 

 

 

이제 fileInputRef 에 접근하려면,

const { register, watch } = useFormContext();

const fileInputRef = watch('fileInputRef');

 

 이렇게 watch 로 접근해주면된다. 

 

-> 이미지 첨부 외에 오디오 관련 코드도 싹 다 갈아 엎을 예정이다. 뒷 이야기에서 계속할 것이다.