react 이미지 파일 업로드 , 미리보기

유데미 학습내용을 정리 , 복붙

1. FileReader를 사용한 리액트 예제

import React, { useState } from 'react';

function FileReaderPreview() {
  const [imageSrc, setImageSrc] = useState('');

  const handleImageChange = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
      setImageSrc(event.target.result);
    };

    reader.readAsDataURL(file);
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageChange} />
      
      {imageSrc && <img src={imageSrc} alt="Preview" 
      style={{ width: '100px', height: '100px' }} />}
    </div>
  );
}

export default FileReaderPreview;

readAsText() : 파일 객체의 내용을 텍스트로 읽음
readAsDataURL() : 파일 객체를 읽은 후 데이터 URL으로 변환
readAsArrayBuffer() : 파일 객체의 내용을 배열 버퍼로 읽음
readAsBinaryString() : 파일 객체의 내용일 비트 문자열로 읽음

사용 예제
const reader = new FileReader();

// 1. 텍스트
reader.readAsText(File 또는 Blob);

// 2. 데이터를 URL로 변환
reader.readAsDataURL(File 또는 Blob);

// 3. 배열 버퍼
reader.readAsArrayBuffer(File 또는 Blob);

// 4. 비트 문자열
reader.readAsBinaryString(File 또는 Blob);

2. URL.createObjectURL을 사용한 리액트 예제

import React, { useState } from 'react';

function URLPreview() {
  const [imageSrc, setImageSrc] = useState('');

  const handleImageChange = (e) => {
    const file = e.target.files[0];
    setImageSrc(URL.createObjectURL(file));
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageChange} />
      {imageSrc && <img src={imageSrc} alt="Preview" 
      style={{ width: '100px', height: '100px' }} />}
    </div>
  );
}

export default URLPreview;

URL.createObjectURL과 FileReader는 웹 개발에서 파일, 특히 이미지와 같은 미디어 파일을 다룰 때 사용되는 두 가지 다른 방법이라고 합니다.
각각의 방식은 파일 데이터를 다루는 방식과 사용되는 목적에 차이가 있습니다.

1. URL.createObjectURL

1. 작동 방식: 이 메서드는 브라우저 메모리에 있는 파일에 대한 임시 URL을 생성합니다. 이 URL은 브라우저가 직접 참조할 수 있으며, img ,video등의 HTML 요소에서 사용할 수 있습니다.
   주 사용 목적: 주로 업로드된 미디어 파일의 미리보기를 제공하는 데 사용됩니다. 사용자가 파일을 업로드하면, 바로 해당 파일의 미리보기를 화면에 표시할 수 있습니다.

2. 장점: 간단하고 빠릅니다. 파일 데이터를 읽는 별도의 처리 과정 없이 바로 미리보기 URL을 생성할 수 있습니다.

3. 단점: 오직 브라우저에서만 접근 가능한 임시 URL을 생성합니다. 따라서 브라우저 세션이 종료되면 URL도 더 이상 유효하지 않게 됩니다. 또한, 파일의 내용을 직접적으로 읽거나 처리하는 것은 불가능합니다.

2. FileReader

1. 작동 방식: FileReader 객체는 파일의 내용을 비동기적으로 읽어서 사용자가 파일 데이터에 접근할 수 있도록 합니다. 파일의 데이터를 다양한 형태(ArrayBuffer, BinaryString, DataURL 등)로 읽을 수 있습니다.
   주 사용 목적: 파일의 내용을 읽거나, 텍스트 파일을 처리하거나, 이미지 파일을 데이터 URL로 변환하는 등의 작업에 사용됩니다. 파일 내용에 대한 자세한 조작이 필요한 경우에 사용합니다.

2. 장점: 파일의 실제 데이터에 접근할 수 있어, 파일 내용을 읽거나 변환하는 복잡한 작업을 수행할 수 있습니다.

3. 단점: FileReader의 작업은 비동기적으로 수행되며, 파일 크기가 큰 경우 처리 시간이 길어질 수 있습니다. 코드가 URL.createObjectURL에 비해 복잡할 수 있습니다.

결론

간단한 미리보기가 필요한 경우에는 URL.createObjectURL을 사용
파일 내용의 자세한 처리가 필요한 경우: FileReader를 사용