컴포넌트의 간단한 구조는
> 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 로 접근해주면된다.
-> 이미지 첨부 외에 오디오 관련 코드도 싹 다 갈아 엎을 예정이다. 뒷 이야기에서 계속할 것이다.
'WEB > React' 카테고리의 다른 글
[Capsule] react-hook-form 적응기 (2) (0) | 2024.05.29 |
---|