React Hook Form

useForm으로 이미지 업로드

<input {...register("image")} id="picture" type="file" />

file 형식의 <input> 태그에 image를 받는 register를 추가한다.

이미지 미리보기

const { watch, } = useForm();
const [imagePreview, setImagePreview] = useState("");
const image = watch("image");
  useEffect(() => {
    if (image && image.length > 0) {
      const file = image[0];
      setImagePreview(URL.createObjectURL(file));
    }
  }, [image]);

<img src={imagePreview} />

useForm의 watch로 업로드한 이미지 정보를 얻고, URL.createObjectURL로 브라우저에게 이미지 접근 권한을 부여한다. 접근 가능한 주소를 setImagePreview에 넣어주고 <img> 태그의 소스로 추가한다.

참고
노마드 코더 - 캐럿마켓 클론코딩
React Hook Form