[React/TS] 이미지 첨부 & 미리보기 : useRef, FileReader, createObjectURL

 

 

💡 리액트에서 파일 첨부하기

 

우선 미리보기를 위한 로직 🫠

 

const handleClickImg = (id: string | undefined) => { // img & input 을 감싸고 있는 div 클릭 시
  const fileInput = document.getElementById(`fileInput${id}`); // fileInput${id} id를 가진 DOM 요소를
  fileInput?.click(); // 클릭한다.
  };

const handleChangeImg = (id: string | undefined, files: FileList | null) => {
  const file = files?.[0];
  if (file) {
    const imgUrl = URL.createObjectURL(file); // 그리고 받은 파일을 URL 바꾸고
    setQuestions((prev) =>
      prev.map((question) => {
        return question.id === id ? { ...question, imgUrl } : question; // useState 에 넣어준다.
      })
    );
  }
};

<div onClick={() => handleClickImg(id)}>
  <Image
    src={imgUrl} // 초기값이었다가 위에서 바꿔둔 URL 을 받아온다.
    alt="문항 이미지"
  />
  <input
    type="file"
    id={`fileInput${id}`} // 원랜 ref 로 작성..
    onChange={(e) => {
      e.preventDefault();
      handleChangeImg(id, e.target.files);
    }}
    className="hidden" <!-- 숨겨둔 파일 추가 input -->
  />
</div>

 

map 을 돌려서 이미지 input 이 여러개인 상황에서

팀원분이 작성하신 코드를 보고 똑같이 useRef 로 input 을 가져오다가,,

자꾸 이미지 첨부가 마지막 input 으로만 들어가는 오류가 발생했다.

 

튜터님이랑 콘솔 찍으면서 살펴보니

map을 돌렸지만 ref 부분을 똑같은 이름으로 지정해주고 있었고..

같은 ref 가 세 개가 있어서 가장 마지막 input 을 가져오던 것이었다.

 

❗️ 그으래서 그럼 map 안에서 useRef 를 지정해두면 ref 도 map 을 돌겠지 했는데

ref 는 콜백함수 내에 넣을 수가 없었다..

 

🥹 결국 getElementById 로 가져오기로!

ref 를 지우고, map 을 돌면서 가져온 고유한 id 를 input 마다 넣어줬다.

그러니 순서에 맞게 이미지 첨부가 잘 됐다!

 

ref 를 쓰는 이유가 중복될 수 있는 id 를 방지하려는 것이니

uuid 로 주고 있는 id 를 넘겨줬으니까 getElementById 를 써도 괜찮을 것 같다..!

 

 

하지만 가끔 첨부가 잘 안되는 오류가 있다.. 이건 HTML 태그 순서 문제 같은데 내일 고쳐보겠읍니다......

 

 

 

🔗 https://amyhyemi.tistory.com/244?category=873656

[TIL] 2109016 오늘 공부는 getElementById/useRef

🔗 https://hojung-testbench.tistory.com/entry/React-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84

[React] 파일 업로드 기능 구현

🔗 https://guiyomi.tistory.com/119

Javascript - 업로드한 이미지 미리보기 구현

🔗 https://guiyomi.tistory.com/148 나중에 활용하기 👀

React.js - 드래그 앤 드롭 파일 업로드 만들기