Image Preview 보여주기

Image Preview

게시글을 작성하거나, 프로필 이미지를 변경할 때 등등 이미지를 업로드 하는 경우가 있습니다. 이미지를 서버에 업로드 하기 전에 미리보기를 보여줘야 하는데, 어떻게 하는지 설명 하겠습니다.

form handling

먼저 image 를 받는 input 이 있어야 합니다.
여기서는 react-hook-form 을 사용하겠습니다.

const {register,watch}=useForm()
const [avatarPreview, setAvatarPreview] = useState("");
const avatar = watch("avatar");
useEffect(() => {
  if (avatar && avatar.length > 0) {
    const file = avatar[0];
    setAvatarPreview(URL.createObjectURL(file));
  }
}, [avatar]);

return 
<>
  <img src={avatarPreview}/>
  <input {...register("avatar")} type="file" accept="image/*"/>
</>

먼저 react-hook-form 의 register를 사용해서 avatar로 등록해주고, 해당 값이 변할 때 마다 watch 를 사용해서, avatar를 변경합니다.
다음으로는 avatar값을 URL.createObjectURL 함수를 통해서 브라우저 메모리에 만들어줍니다.

만들어진 url 은
blob:http **** 와 같은 형태로 만들어집니다.
이 url 은 브라우저의 메모리에 존재합니다.

이 url을 img의 src로 부여하면, ImagePreview 가 보이게 됩니다.