[TIL, React] 이미지 미리 보기

이미지 미리보기 구현 법

1. 서버 단의 이미지 가져오기.

2. 서버에 올라가기 전 이미지 미리보기.

  const [imagePreview, setImagePreview] = useState(null);

  const handleFileInputChange = (e) => {
    setFiles({
      selectFile: e.target.files[0],
    });
    const {
      target: { files },
    } = e;
    const theFile = files[0];
    const reader = new FileReader();
    reader.readAsDataURL(theFile);
    reader.onloadend = (finishedEvent) => {
      const {
        currentTarget: { result },
      } = finishedEvent;
      setImagePreview(result);
    };
  };

  const [fileName, setFileName] = useState("");