리액트에서 이미지 미리보기 만들어보기 (React Image Preview)

 

서론

HTML의 input 태그로 이미지를 핸들링할 때 현재 선택한 이미지를 미리 보고 싶은 경우가 있다.

라이브러리를 통해 구현할 수도 있지만 어떤 방식으로 구현할 수 있을까 고민해보았다.

 

Web API 중 FileReader라는 객체를 사용하여 구현해보도록 하겠다.

 

 

React에서 ImagePreview 만들기

 

마크업은 위와 같다.

동작원리는 다음과 같이 설계했다.

• input 이미지가 변경될 때 onChange 함수 내부에서 파일을 체크한다.
• 위의 File 객체를 기반으로 이미지를 base64로 인코딩한다.
• 인코딩된 문자열을 imageSrc state에 넣음으로 렌더링 하여 프리뷰를 보여준다.

즉, input에서 사용자가 입력한 File 객체를 base64로 인코딩할 필요가 있다.

이를 위해서 FileReader라는 Web API를 사용한다.

 

FileReader

기본적으로 FileReader는 File, Blob 객체를 핸들링하는데 사용된다.

File, Blob 객체를 사용해 특정 파일을 읽어들여 자바스크립트에서 파일에 접근할 수 있도록 도와주는 도구이다.

 

기본적으로 EventTarget을 상속받았기에 이벤트리스너를 부착해줄 수 있다.

 

FileReader.readAsDataURL()

readAsDataURL은 File 혹은 Blob 을 읽은 뒤 base64로 인코딩한 문자열을 FileReader 인스턴스의 result라는 속성에 담아준다.

이 메서드를 사용해 우리의 이미지를 base64로 인코딩하여 imageSrc 라는 state 안에 넣어줄 것이다.

 

FileReader.onload

FileReader가 성공적으로 파일을 읽어들였을 때 트리거 되는 이벤트 핸들러이다.

이 핸들러 내부에 우리가 원하는 이미지 프리뷰 로직을 넣어주면 된다.

 

미리 보기 로직 구현

const encodeFileToBase64 = (fileBlob) => {
    const reader = new FileReader();
    reader.readAsDataURL(fileBlob);
    return new Promise((resolve) => {
      reader.onload = () => {
        setImageSrc(reader.result);
        resolve();
      };
    });
  };

 

input의 onChange에 위의 함수를 넣어줄 것이다.

 

• FileReader의 인스턴스 reader을 생성한다.
• 인자로 받은 fileBlob을 base64로 인코딩한다.
• reader가 인코딩을 성공했다면 reader.result 안에 담긴 문자열을 imageSrc로 세팅해준다.
• resolve를 호출하여 Promise를 이행상태로 만들어준다.

결과 코드

결과

위와 같이 고양이 이미지를 미리 볼 수 있게 되었다!