[React] 다중 첨부 이미지 미리보기 및 제거 컴포넌트

이미지 첨부 기능을 개발하면서,

input 태그에 파일이 첨부될 때(onChange)의 event 를 콘솔에 찍어보았는데요.

 

다중업로드?

<input type="file" multiple /> 처럼 multiple 속성값을 넣어주면, 다중 파일 업로드가 가능해진다고 해요!

콘솔을 찍어보면 Files 내부에 파일을 Object 형태로 받아오고 있다는 것을 확인할 수 있어요.

 

미리보기 기능을 구현하기 위해선 이미지 DOM이 필요한데, 이것은 URL.createObjectUrl() 메서드를 활용하여 반환받을 수 있어요.

 

위에서 받아온 파일 Object 각각을 URL.createObjectUrl() 의 매개변수로 넣어주면 주어진 객체를 가리키는 URL을 DOMString 으로 반환받을 수 있어요. 이 때 매개변수로 넣어주는 Object는 File, Blob, MediaSource 형태여야 합니다.

 

참고 : MDN Web Docs : URL.createObjectURL()

URL.createObjectURL() - Web API | MDN

 

위에서 얻은 DOMString을 <img> src 속성에 대입해준다면 미리보기 이미지를 구현할 수 있습니다! 👏

 

---

 

요약

1️⃣ <input> 대신 <label> 을 사용하여, 이미지 첨부 UI를 디자인한다. 이 때, <input>은 display : none 으로 숨긴다.

2️⃣ <input> 에 onChange 이벤트를 등록한다.

3️⃣ onChange 이벤트에 첨부된 파일을 DOMString 으로 반환해주는 함수를 대입한다.

4️⃣ 반환받은 DOMString은 배열 형태의 State 로 관리한다.

5️⃣ 첨부된 이미지 DOMString을 담고 있는 배열 State를 순환하여 미리보기 이미지 컴포넌트를 렌더링해준다.

 

 

---

 

State 선언

const [previewImgList, setPreviewImgList] = useState([])

• 미리보기 이미지 객체들을 관리할 배열 형태의 State를 선언합니다.

 

미리보기 이미지 DOMString 저장

const handleCreatePreviewImg = event => {
  let previewUrlList = [...previewImgList]
  const uploadFilesObject = event.target.files
  for (let i = 0; i < uploadFilesObject.length; i++) {
    const currentImgUrl = URL.createObjectURL(uploadFilesObject[i])
    previewUrlList.push(currentImgUrl)
  }
  // 이미지 최대 5개 제한
  if (previewUrlList.length > 5) {
    previewUrlList = previewUrlList.slice(0, 5)
  }
  setPreviewImgList(previewUrlList)
  // (+ 개발 중인 프로젝트에 따라 서버에 저장하기 위한 코드를 추가할 수 있음.)
}

• onChange 이벤트에 넣어줄 함수입니다.
• 첨부 파일이 들어올 때, 들어온 파일들을 DOMString 형태로 반환하여 준다. 반환된 파일은 관리하고 있는 state에 추가시킵니다.
• 이미지는 최대 5개 첨부할 수 있도록, 배열을 자르는 방식으로 제한하였습니다.

 

미리보기 이미지 삭제

const handleDeleteImage = id => {
  const filteredImgList = []
  ;[...previewImgList].map((img, imgIndex) => {
    if (id !== imgIndex) {
      filteredImgList.push(img)
    } else {
      URL.revokeObjectURL(img)
    }
  })
  setPreviewImgList(filteredImgList)
  setValue('urls', filteredImgList)
}

• handleDeleteImage는 삭제하고자 하는 이미지 컴포넌트 위 X 버튼을 onClick 하면 작동하는 함수입니다.
• 미리보기 DOMString 값이 저장된 배열을 순환하며, 현재 누른 컴포넌트의 id값과 미리보기 이미지의 id값이 일치하지 않으면 (삭제하고자하는 컴포넌트가 아닌 경우), 배열에 포함합니다.
• 만약 일치한다면 (삭제하고자하는 컴포넌트인 경우), 배열에 포함하지 않으며 URL.revokeObjectURL 를 통해 URL 객체를 제거합니다. → MDN에서 최적의 성능과 메모리 사용량을 위해서 권장하고 있는 방식입니다!

 

주요 코드

...
const UploadPreviewImage: React.FC<TProps> = ({ ... }) => {
  ...
  return (
    <StyledWrapper>
      <div className="photo-input-preview-box">
        <div className="photo-wrap">
          <label htmlFor="uploadFile">
              <div>사진 업로드</div>
          </label>
        </div>
        {previewImgList.map((previewImg, previewImgIdx) => {
          return (
            <ReviewPreviewPhoto
              key={previewImgIdx}
              id={previewImgIdx}
              imgSrc={previewImg}
              handleDeleteImage={handleDeleteImage}			
            />
          );
        })}
      </div>
      <input
        type="file"
        multiple
        id="uploadFile"
        accept="image/*"
        style={{ display: 'none' }}
        onChange={handleCreatePreviewImg}
      />
    </StyledWrapper>
  );
};

export default UploadPreviewImage;

• input 대신 label 태그를 사용해 input UI를 디자인합니다.
• previewImgList (= DOMString을 담고 있는 배열)을 순환하며 이미지를 랜더링합니다.
• 이미지에 handleDeleteImage 함수를 props 로 넘겨줘, 컴포넌트 위에 X 버튼을 두고, X를 눌렀을 때 해당 함수가 작동하도록 합니다.