URL.createObjectURL() 로 이미지 미리보기(프리뷰)를 만들어보자! (리액트에서 사용)

(+ 저는 리액트에서 사용하였습니다.)

 

1.URL.createObjectURL() 이 뭐지?

주어진 객체를 가리키는 URL을 DomString으로 반환.

해당 URL은 자신을 생성한 창의 document가 사라지면 함께 무효화 됨.

 

2. 사용법

const objectURL = URL.createObjectURL(object)

object 

객체 URL을 생성할 File, Blob, MediaSource

 

3. 내가 활용한 방법

 

우선 input을 만들어 준다.

                <input
                  id="imageUploadInput"
                  type="file"
                  accept="image/*"
                  ref={inpRef}
                  onChange={handleImgPreview}
                  className="ir"
                />

(나는 input은 보이지 않게 하고 label 클릭 시 input이 작동하도록 했다.)

 

  // 이미지 미리보기
  function handleImgPreview(e) {
    setPreview(URL.createObjectURL(e.target.files[0]));
  }

이미지 파일이 변경된다면

setPreview에 e.target.files[0] creatObjectURL을 사용해 변환해준다.

나는 단 한개의 이미지만 처리하기 때문에 files[0]으로 했다.

 

그러면 이렇게 짜잔!

 

 

📍틀린 부분이 있다면 말해주세요!

 

참고

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL