[React] 이미지 업로드 / 미리보기

쇼핑몰 프로젝트를 진행하면서 스타일 공유 커뮤니티 페이지에서 이미지 업로드 / 미리보기를 처음으로 구현해보았다.

이미지 업로드 / 미리보기는 프로필, 게시글 등 다양한 곳에서 사용될 수 있기에 라이브러리도 있지만 직접 구현해보고 공부한 내용을 기록해보려 한다.

 

1. FileReader

Web API로 FileReader는 File, Blob 객체가 저장하고 있는 바이너리 데이터를 '비동기적'으로 읽어주는 객체이다.

기본동작은 read - load Event - result 의 과정을 거친다. 

 

FileReader 객체를 생성한 후에 readAsDataURL()은 File 또는 Blob을 읽은 뒤 base64로 인코딩된 문자열을 result 라는 속성에 담는다.

onload()는 성공적으로 파일을 읽었을 때 실행되는 이벤트핸들러인데 onload()를 실행하는 Promise 객체를 return한다.

핸들러 내부에는 reader.result 안에 담긴 문자열을 image 상태값에 업데이트 해준다.

reslove를 호출한 뒤 input의 onChange에 함수를 넣어주면 된다.

function TrendInput() {
  const [image, setImage] = useState<any>(null);

  const saveImage = (e: any) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);

    return new Promise<void>((resolve) => {
      reader.onload = () => {
        setImage(reader.result || null);
        resolve();
      };
    });
  };

  return (...
            <>
              <Button htmlFor="imgUpload">이미지 업로드</Button>
              <Input type="file" id="imgUpload" accept="image*" onChange={(e) => saveImage(e)} />
            </>

          {/* 이미지 영역 */}
          <ImageWrapper>
            {image ? (
              <Image src={image} alt="사용자 업로드 이미지" />
            ) : (
              <NoImage src={uploadImage} />
            )}
          </ImageWrapper>
)}

결과는!

01

업로드 화면 및 미리보기

 

 

2. 후기

블로그를 쓰고 기록을 하면서 공부를 하기 위해 찾아보던 중에 FileReader() 방식이 아닌 다른 createObjectURL 을 사용하는 방식 찾을 수 있었다. 각 방식의 장단점을 확인할 수 있었는데 공부 후에 비교를 통해 블로그에 다시 한번 정리해야겠다고 생각했다. 체크 해놓아야겠다.

블로그에 기록을 하면서 공식 문서나, 글들을 찾아보면 지금 쓰고 있는 내용 외에 공부되는 것들이 많은 것 같다.