React image 미리보기

image 미리 보기

# 시작하며

회사 내에서나, 학교에서 react 프로젝트를 진행하다 보면 빼먹지 않고 등장하는 기능이 사진 첨부 기능이다. 사진 말고도 다양한 데이터들을 DB에 저장하지만, 사진 첨부는 다른 데이터보다 까다롭다. 또한 사진을 첨부하기 위해서는, 첨부 후 완료를 표시하기 위한 사진이나 사진 이름을 미리 보기로 추가해 주어야 하기 때문에 부가적인 요구사항이 많아진다. 오늘은 이러한 사진 첨부를 위한 미리보기 기능에 대해 알아보자.

 

 

# 사진 미리보기

앞서 말한 사진을 첨부하는 등의 image를 핸들링하면서 미리보기 기능을 구현하고 싶은 경우가 자주 발생한다. 이미지를 업로드하기 전에 어떤 이미지를 선택했는지 미리 보여주고, 대표 이미지를 설정하거나 필요 없는 파일은 삭제하도록 하는 기능을 구현해 보았다.

 

<input type="file"/>

먼저 사진을 첨부하는 것부터 시작하면, 위처럼 간단하게 나타낼 수 있다. 다음과 같이 코드를 작성하면 파일 선택 버튼이 생성되고 사진을 첨부할 수가 있다. onChange를 추가하여 첨부한 사진에 대한 처리를 해주어 선택된 사진을 관리할 수 있는 것이다. 

 

• image preview

그렇다면 이렇게 첨부한 사진에 대한 미리보기는 어떻게 생성하는 것일까? 나는 FileReader라는 객체를 사용하여 구현하였다. 

...

<input type="file" onChange={seletImage}/>
 
{imagePreview && <img src={imagePreview} alt="preview image" />}
 ...

위 코드의 동작 원리는 다음과 같다. input 이미지가 사용자에 의해 선택이 되면, onChange 함수 seletImage에서 파일을 체크한다. 이후 File 객체를 기반으로 이미지를 인코딩 처리한 후, 인코딩 된 문자열을 imagePreview state에 넣어줌으로써 렌더링 하여 프리뷰가 보이게 되는 것이다.

 

*여기서 주의할 점은, 다른 데이터들과 달리, image는 저장한 형태 그대로 사용하는 문자 데이터들과 달리, 링크를 통해 보이는 경우가 많음으로 인코딩 처리를 해 주어야 한다. 앞서 말한 FileReader 객체 역시 해당 인코딩 작업에 사용된다.

 

 

• FileReader

기본적으로 FileReader는 File과 Blob 객체를 핸들링하는데 주로 사용된다. 즉 file 및 blob 객체를 통해 특정 파일을 읽고, JS에서 파일에 접근할 수 있도록 도와주는 도구인 것이다.

    let reader = new FileReader(); // FileReader API로 이미지 인식
    reader.readAsDataURL(e.target.files[i]); //reader에게 file을 먼저 읽힘

    reader.onload = () => {// 사진 올리고 나서 처리하는 event
      fileURLs[i] = reader.result;
      setLoadedImage([...fileURLs]); //데이터를 img src 넣어 이미지 미리보기 가능
      e.target.value = ""; //같은 파일을 올리면 인지못해서 초기화
    };

사용은 다음과 같다. readAsDataURL은 file을 읽은 후 *base64로 인코딩한 문자열을 FileReader 인스턴스의 속성에 담아 state안에 넣어준다. 이후 FileReader.onload를 통해 FileReader가 성공적으로 파일을 읽어 들였는지 확인해준다. 

*컴퓨터 분야에서 쓰이는 Base 64 (베이스 육십사)란 8비트 이진 데이터(예를 들어 실행 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리키는 개념이다.

사진 첨부 후 미리보기 결과