리뷰 쓰기 폼 구현 중 유저가 사진을 올리면 미리보기 화면이 띄워지는 모습을 구현하고 싶었다.

1차 프로젝트에서는 라이브러리 사용을 금지하고 있어서 순수 리액트를 이용해서 만들어야했다.

우선 냅다 구글링을 해보았다.

🔎 구글링 input file 미리보기
https://nukw0n-dev.tistory.com/30

Web API중에 FileReader라는 객체를 사용하면 구현 가능하다는 것을 알았다.

FileReader

• File, Blob 객체를 핸들링하는데 사용
• File, Blob 객체를 사용해 특정 파일을 읽어들여 자바스크립트에서 파일에 접근할 수 있도록 도와주는 도구
• 기본적으로 EventTarget을 상속받았기에 이벤트리스너를 부착

FileReader.readAsDataURL()

readAsDataURL은 File 혹은 Blob 을 읽은 뒤
base64로 인코딩한 문자열을 FileReader 인스턴스의 result라는 속성에 담아준다.
우리의 이미지를 base64로 인코딩하여 imageSrc 라는 state 안에 넣어줄 것다.

FileReader.onloadFileReader

FileReader.onloadFileReader가 성공적으로 파일을 읽어들였을 때 트리거 되는 이벤트 핸들러이다.이 핸들러 내부에 우리가 원하는 이미지 프리뷰 로직을 넣어주면 된다.

const encodeFileToBase64 = fileBlob => {
    const reader = new FileReader(); // `new FileReader()` 를 reader 변수에 담아서 특정 파일을 읽어들여 자바스크립트에서 파일에 접근한 후
    reader.readAsDataURL(fileBlob); // reader.readAsDataURL(fileBlob)로 인자로 받은 fileBlob을 base64로 인코딩한다
    return new Promise(resolve => {  
      reader.onload = () => { // reader가 인코딩을 성공했다면
        setImageSrc(reader.result); // reader.result 안에 담긴 문자열을 imageSrc로 담는다.
        resolve(); // 작업이 성공했다면 resolve를 호출하여 실행한다. 
      };
    });
  };

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

Promise()
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

// 우리가 수행한 비동기 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출합니다.

---

참고
JS ver : http://yoonbumtae.com/?p=3304
React ver : https://nukw0n-dev.tistory.com/30