react - 이미지 미리보기

클라이언트에서 사진을 업로드할 시,
서버에 바로 저장하지 않고 미리보기로 업로드한 사진을 보여줄 경우가 있다.
이를 구현한 코드는 아래와 같다.

1. fileReader

export function getPrevImg(file, setter) {
  if (file && file.length>0) {
      const actualFile = file[0];
      const reader = new FileReader();
      reader.readAsDataURL(actualFile);
      reader.onload = () => {
          setter(reader.result);
      };
  }
}

위의 함수를 input의 onChange이벤트에 아래와 같이 적용시켜준다.

const [img,setImg] = useState()
const [imgFile,setImgFile] = useState()

<input type="file" onChange((e)=>{
  if(e.currentTarget.files && e.currentTarget.files.length>0){
      setImgFile(e.currentTarget.files)
      getPrevImg(e.currentTarget.files, setImg);
  }
})/>

2. createObjectURL

  const [imgFile, setImgFile] = useState("");

  const saveFileImage = (e) => {
    setFileImage(URL.createObjectURL(e.target.files[0]));
  };

  // 파일 삭제
  const deleteFileImage = () => {
    URL.revokeObjectURL(fileImage);
    setFileImage("");
  };