[TIL220128] Image uploader

 

 

 

const ImageUpload = ({ title }) => {
  const [selectedFile, setSelectedFile] = useState([]);

  const fileInput = useRef();

  const fileSelectedHandler = (e) => {
    const fileName = e.target.files[0].name;
    window.localStorage.setItem(fileName, fileName);
    const addImg = () => {
      let imageArr = [...selectedFile];
      imageArr.unshift(fileName);
      setSelectedFile(imageArr);
    };
    addImg();

  };

  const addImgBtn = (e) => {
    e.preventDefault();
    fileInput.current.click(); //onchange아니고 click!!!!
  };

  const removeImgBtn = (e) => {
    setSelectedFile(selectedFile.filter((name) => name !== e));
    window.localStorage.removeItem(e);
  };

//
    <div className="container">
      <div className="title">
        <h2>{title} 이미지</h2>
      </div>
      <div className="imgAddContainer">
        <input
          type="file"
          style={{ display: "none" }}
          onChange={fileSelectedHandler}
          ref={fileInput}
        />
      ...