FileReader 객체를 이용한 업로드 이미지 파일 미리보기

import React, { useRef, useState } from "react";

export const Test = () => {
  const fileRef = useRef();
  const [previewSRC, setPreviewSRC] = useState([]);
  const handleFileReader = (e) => {
    const fileReader = new FileReader();
    console.log(fileReader);
    fileReader.readAsDataURL(e.target.files[0]);
    fileReader.onloadend = () => {
      setPreviewSRC([...previewSRC, fileReader.result]);
      console.log(fileReader.result);
    };
    fileReader.onerror = () => console.log("error");
  };
  return (
    <div>
      <input
        style={{ display: "none" }} //숨기기
        type={"file"}
        ref={fileRef}
        onChange={handleFileReader}
        accept=".jpg, .png"
        multiple
      />
      {/*화면에 보여지는 버튼 */}
      <button onClick={() => fileRef.current.click()}>이미지 추가하기</button>
      <br />
      <div
        className="scroll_wrapper"
        style={{ display: "flex", overflowX: "scroll" }}
      >
        {previewSRC.map((url, idx) => (
          <img
            src={url}
            alt="업로드 사진"
            style={{ width: "100px", height: "100px" }}
          />
        ))}
      </div>
      {/* multiple을 붙이면 여러파일을 업로드 할 수 있음 */}
    </div>
  );
};