React 이미지 미리보기 구현 방법

by

이미지 파일을 선택해서 해당 이미지를 웹 상에서 바로 볼 수 있게 해야 할 때가 있습니다. React 이미지 미리보기 구현 방법을 살펴보겠습니다.

React 이미지 미리보기 구현에 필요한 재료들

이미지 미리보기를 하기 위해서는 우선 파일을 선택할 수 있는 <input type=”file”> HTML 엘리먼트가 필요합니다. 아래 그림 1에서 파란 상자로 표시되어 있습니다.

그리고 두번째로 선택한 이미지를 보여줄 <img> 태그가 필요합니다. 그림 1에서 빨간색으로 표시된 부분입니다. 아래에 표시된 그림은 그림 파일을 선택하지 않았을 때 기본으로 보여주는 이미지입니다. 이미지는 Pixabay 사용자 JennyDai가 제공한 이미지를 활용했습니다.

그림 1. React 이미지 미리보기 구현: 대체 이미지 보여주기
그림 1. React 이미지 미리보기 구현: 대체 이미지 보여주기

React 이미지 미리보기 구현 방법

작동 원리와 코드를 함께 살펴보시면 쉽게 이해할 수 있습니다.

작동 원리

  1. input file의 Choose File 버튼을 누른 후 파일을 선택합니다(라인 21).
  2. <input> 엘리먼트의 onChange에서 변화를 감지하고 onChangeFile 함수를 실행합니다(라인 21, 8).
  3. onChangeFile 함수에서는 선택한 파일들을 얻어오고(라인 9) 선택한 파일이 없으면 종료(라인 10~12)합니다.
  4. FileReader 클래스를 이용해서 reader 객체를 생성하고, readAsDataURL() 메서드를 이용해서 해당 파일의 값을 DataURL 형태로 읽어옵니다(라인 13, 14).
  5. readAsDataURL() 메서드로 모두 데이터를 읽어오면, onload 메서드에 의해 imgSrc를 세팅해 줍니다(라인 15~17).
  6. <img> 엘리먼트의 src 값이 달라지면서 이미지가 그려집니다.

구현 코드

위에서 설명한 내용이 작성된 App.js 파일 전체입니다. 혼란을 줄이기 위해서 별도로 파일을 분리하지 않고 하나의 파일로 모두 작성했습니다. 리팩터링은 당신의 필요에 따라 하시기 바랍니다.

import './App.css';
import {useRef, useState} from "react";
import alternativeImg from "./img.png"

function App() {
  const selectFileRef = useRef();
  const [imgSrc, setImgSrc] = useState();
  const onChangeFile = (e) => {
    const files = selectFileRef.current.files;
    if (!files.length) {
      return;
    }
    const reader = new FileReader();
    reader.readAsDataURL(files[0]);
    reader.onload = (e) => {
      setImgSrc(e.target.result);
    };
  };
  return (
    <div className="App">
      <input type="file" ref={selectFileRef} onChange={onChangeFile} style={inputStyle} /><br/>
      <img src={imgSrc ? imgSrc : alternativeImg} alt="미리보기 이미지" style={imgStyle}/>
    </div>
  );
}

const inputStyle = {
  border: "3px solid blue",
}

const imgStyle = {
  width: "400px",
  height: "300px",
  border: "3px solid red",
}

export default App;
JavaScript

실행 결과는 아래 그림과 같습니다. 저는 pixabay에서 trudith가 제공한 이미지를 불러왔으며 아래와 같이 표현되는 것을 확인할 수 있었습니다.

input type=”file” 인터페이스가 예쁘지 않은데요?

브라우저에서 지원하는 기본 <input type=”file”>의 UI는 그냥 심플하고 단순함 그 자체입니다. 보통의 상용 서비스에서는 이렇게 사용하지 않고 별도의 버튼을 만들어서 누르게 한다든지, 아니면 보여주는 이미지를 클릭해서 파일을 선택하게 하기도 합니다.

이 부분과 관련된 것은 React 엘리먼트 접근/제어 방법: ref 사용법에 언급해 두었으니, 보시고 활용하시면 되겠습니다.

관련 자료

React의 docs의 useRef 페이지와 MDN의 FileReader 페이지를 참고했습니다. Pixabay 사용자 JennyDai와 trudith에게 고마움을 표합니다.

같이 읽으면 좋은 글

Leave a Comment