React에서 File API 사용하기

웹 애플리케이션에서 파일 업로드 및 처리는 사용자 경험에 큰 영향을 줍니다. React에서는 브라우저의 기본 File API를 활용하여 간편하게 파일을 선택하고 읽을 수 있습니다. File API는 파일 정보를 읽고 파일의 내용을 처리하는 기능을 제공합니다. 이번 블로그에서는 React를 사용해 File API를 구현하는 방법과 다양한 활용법을 자세히 다뤄보겠습니다.

---

File API란?

File API는 사용자가 브라우저를 통해 파일을 선택하고, 그 파일의 내용을 읽고 조작할 수 있는 웹 API입니다. 이를 통해 다음과 같은 작업이 가능합니다.

• 파일 이름, 크기, 타입 등의 메타데이터 확인
• 파일의 내용을 텍스트 또는 바이너리 형태로 읽기
• 여러 파일 동시 업로드 및 처리

React와 결합하면 사용자 인터랙션을 더욱 직관적으로 만들 수 있습니다.

File API 주요 객체

1. File: 파일의 메타데이터(이름, 타입, 크기 등)를 나타내는 객체입니다.
2. FileList: 여러 파일을 다룰 때 사용되는 파일 객체의 집합입니다.
3. FileReader: 파일의 내용을 읽고 처리하는 데 사용되는 객체입니다.

---

React에서 File API 시작하기

React 프로젝트에서 File API를 사용하기 위해 먼저 파일 입력(input)을 위한 HTML 요소를 만들어야 합니다. 그 후 onChange 이벤트를 통해 파일을 선택하고 처리하는 코드를 작성합니다.

기본 파일 업로드 컴포넌트

아래는 파일을 선택하고 파일 정보를 콘솔에 출력하는 간단한 예제입니다.

import React, { useState } from 'react';

function FileUploader() {
  const [file, setFile] = useState(null);

  // 파일 선택 핸들러
  const handleFileChange = (e) => {
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      console.log('파일 이름:', selectedFile.name);
      console.log('파일 타입:', selectedFile.type);
      console.log('파일 크기:', selectedFile.size, 'bytes');
      setFile(selectedFile);
    }
  };

  return (
    <div>
      <h2>React File API 예제</h2>
      <input type="file" onChange={handleFileChange} />
      {file && <p>선택된 파일: {file.name}</p>}
    </div>
  );
}

export default FileUploader;

코드 설명

1. <input type="file">: 파일을 선택하기 위한 HTML 입력 요소입니다.
2. onChange 이벤트: 사용자가 파일을 선택할 때 호출됩니다.
3. e.target.files: 선택된 파일들의 리스트를 반환합니다. 단일 파일만 선택하면 files[0]를 사용합니다.
4. useState: 선택된 파일 정보를 상태로 저장합니다.

위 예제를 실행하면 파일을 선택할 때 파일 이름, 타입, 크기 정보를 확인할 수 있습니다.

---

FileReader를 사용해 파일 내용 읽기

FileReader 객체를 사용하면 파일의 내용을 읽고 화면에 표시할 수 있습니다.

텍스트 파일 읽기

import React, { useState } from 'react';

function FileReaderExample() {
  const [content, setContent] = useState('');

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        setContent(event.target.result);
      };
      reader.readAsText(file); // 파일을 텍스트로 읽습니다.
    }
  };

  return (
    <div>
      <h2>텍스트 파일 읽기</h2>
      <input type="file" onChange={handleFileChange} />
      {content && (
        <div>
          <h3>파일 내용:</h3>
          <pre>{content}</pre>
        </div>
      )}
    </div>
  );
}

export default FileReaderExample;

코드 설명

1. FileReader: 파일을 읽는 객체입니다.
2. readAsText(): 파일 내용을 텍스트 형식으로 읽습니다.
3. onload 이벤트: 파일 읽기가 완료되면 호출되며 event.target.result에 파일 내용이 저장됩니다.
4. pre 태그: 파일의 내용을 화면에 출력합니다.

위 예제를 사용하면 텍스트 파일의 내용을 브라우저에 출력할 수 있습니다.

---

이미지 미리보기 구현하기

파일 입력을 통해 이미지를 업로드하고 즉시 화면에 미리보기를 표시하는 예제를 작성해 보겠습니다.

이미지 파일 미리보기

import React, { useState } from 'react';

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

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        setPreview(event.target.result); // 이미지 데이터 URL 설정
      };
      reader.readAsDataURL(file); // 파일을 데이터 URL로 읽습니다.
    }
  };

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

export default ImagePreview;

코드 설명

1. accept="image/*": 파일 입력 요소가 이미지 파일만 선택하도록 제한합니다.
2. readAsDataURL(): 파일을 Base64 데이터 URL로 변환합니다.
3. img 태그: 변환된 데이터 URL을 src에 설정해 이미지를 표시합니다.
4. onload 이벤트: 파일 읽기가 완료되면 이미지 URL을 상태에 저장합니다.

---

여러 파일 업로드 처리하기

여러 파일을 동시에 선택하고 각 파일의 정보를 출력하거나 처리하는 방법도 File API를 통해 가능합니다.

여러 파일 선택 및 출력

import React, { useState } from 'react';

function MultipleFileUpload() {
  const [files, setFiles] = useState([]);

  const handleFileChange = (e) => {
    setFiles(Array.from(e.target.files)); // FileList를 배열로 변환
  };

  return (
    <div>
      <h2>여러 파일 업로드</h2>
      <input type="file" multiple onChange={handleFileChange} />
      <ul>
        {files.map((file, index) => (
          <li key={index}>
            {file.name} - {file.size} bytes
          </li>
        ))}
      </ul>
    </div>
  );
}

export default MultipleFileUpload;

코드 설명

1. multiple 속성: 여러 파일을 동시에 선택할 수 있게 합니다.
2. FileList: 선택된 파일들의 리스트입니다.
3. Array.from(): FileList를 배열로 변환해 map()을 사용합니다.

---

결론

React와 File API를 활용하면 다양한 파일 업로드 기능을 간단하게 구현할 수 있습니다. 텍스트 파일 읽기, 이미지 미리보기, 여러 파일 업로드 등 실무에서 흔히 사용되는 기능을 위 예제들을 참고해 구현해 보세요. 필요에 따라 서버로 파일을 전송하거나 파일 검증 등의 추가 로직도 쉽게 확장할 수 있습니다.

React와 File API를 잘 결합하면 사용자 친화적인 파일 업로드 경험을 제공할 수 있을 것입니다.