[React] 이미지 미리보기 기능 구현 방법

---

React에서 이미지 미리보기 기능 구현하기

리액트에서 이미지 파일을 업로드 하기 전 단계에서, 해당 이미지의 미리보기를 확인할 수 있는 기능 구현에 대해 다뤄보고자 한다.

---

어떤 태그들이 사용되는가?

우선 이미지 파일을 업로드 하기 위해선 input 태그와 label 태그가 필요하다.

<label htmlFor="optionImage">+ 이미지 첨부</label>
<input type="file" id="optionImage" name="optionImage" accept="image/*" onChange={e => getImageUrl(e)}/>

하지만 이 상태로 두는 것이 아니라, input 태그 자체는 보이지 않도록 가려줘야 한다.

우리에게는 +이미지 첨부의 버튼 모양만 필요하기 때문에, 이 +이미지 첨부를 label을 통해 버튼과 같이 만들어주면 된다. input에는 display:none;을 주고, label에는 border, cursor: pointer; 등을 주면 버튼같이 생긴 label만 사용자에게 보여지게 되는 것이다.

내가 원하는 파일만 입력되도록 하기

input 태그 내에 accept=””를 활용하면 파일을 업로드 할 때, 내가 원하는 파일 및 확장자만 업로드 할 수 있도록 강제할 수 있다.

// 아래와 같이 모든 확장자의 이미지 파일만 받아올 수도 있고
<input type="file" accept="image/*"/>

// 특정 확장자만 업로드할 수 있도록 설정할 수도 있다.
<input type="file" accept="image/png"/>

---

이미지 미리보기 기능 구현

이제 이미지를 파일 선택창에서 선택하고, 해당 이미지의 미리보기만 화면에 표시해주면 된다.

여기서 원하는 파일을 선택한 후에, 해당 파일의 url 값을 받아올 수 있다.

URL.createObjectURL()

이 js 내장 기능을 활용하면 손쉽게 내가 방금 업로드한 파일의 URL 주소를 얻을 수 있다.

// input태그에 아래와 같이 onChange 이벤트에 대한 함수를 걸어준다.
<input
  type='file'
  accept='image/png'
  onChange={(e) => {
    getImageUrl(e);
  }}
/>;

// 그리고 e.target.files[0]를 통해 해당 파일에 직접적으로 접근하고
const getImageUrl = (e) => {
  let file = e.target.files[0];
  // 해당 파일을 URL.createObjectURL()에 담아주면 우리는 url값을 얻을 수 있다.
  let url = URL.createObjectURL(file);
  setImgUrl(url);
};

이제 여기서 얻은 url 값을 img 태그 내의 src에 넣어주면 된다!

<img src={imgUrl} alt='optionImage' />

---