React에서 이미지 업로드 전 미리보기 구현하기

웹에서 이미지 업로드 기능을 구현할 때, 사용자가 업로드할 이미지를 선택하면 바로 화면에 미리보기를 보여주면 UX가 훨씬 좋아집니다.

React로 이미지 업로드 전 미리보기를 간단하게 구현하는 방법을 알아보겠습니다.

 

이미지 미리보기는 사용자가 파일 선택(input[type="file"])을 하면 파일 객체를 받아서, URL.createObjectURL()을 사용해 브라우저 내 임시 URL을 생성해 이미지를 보여주는 방식입니다.

 

import React, { useState } from 'react';

function ImageUploadPreview() {
  const [preview, setPreview] = useState(null);

  const handleFileChange = (event) => {
    const file = event.target.files[0]; // 단일 파일 선택
    if (file) {
      // 브라우저 내 임시 URL 생성
      const objectUrl = URL.createObjectURL(file);
      setPreview(objectUrl);
    }
  };

  return (
    <div>
      <h2>이미지 업로드 및 미리보기</h2>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      {preview && (
        <div style={{ marginTop: '20px' }}>
          <img src={preview} alt="미리보기" style={{ width: '300px', height: 'auto' }} />
        </div>
      )}
    </div>
  );
}

export default ImageUploadPreview;

 

 

• input 태그에서 이미지 파일을 선택하면 handleFileChange가 실행됩니다.
• 선택된 파일 객체를 받아서 URL.createObjectURL로 미리보기 URL을 만듭니다.
• preview 상태에 저장해 <img> 태그의 src로 사용합니다.
• 화면에 선택한 이미지가 즉시 나타납니다.

 

참고사항 및 개선점

• 메모리 해제: URL.createObjectURL로 생성한 URL은 메모리 누수를 방지하기 위해 사용 후 URL.revokeObjectURL()을 호출해 해제하는 게 좋습니다.
• 다중 이미지 미리보기: 여러 장 이미지를 미리보고 싶다면 event.target.files 배열을 순회하며 URL을 생성하면 됩니다.

import React, { useState, useEffect } from 'react';

function ImageUploadPreview() {
  const [preview, setPreview] = useState(null);

  useEffect(() => {
    // 컴포넌트 언마운트 시 메모리 해제
    return () => {
      if (preview) {
        URL.revokeObjectURL(preview);
      }
    };
  }, [preview]);

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      if (preview) {
        URL.revokeObjectURL(preview);
      }
      const objectUrl = URL.createObjectURL(file);
      setPreview(objectUrl);
    }
  };

  return (
    <div>
      <h2>이미지 업로드 및 미리보기</h2>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      {preview && <img src={preview} alt="미리보기" style={{ width: '300px' }} />}
    </div>
  );
}

export default ImageUploadPreview;

 

 

위와 같이   URL.revokeObjectURL(preview)를 해줘야 합니다.