React에서 파일 업로드 기능 구현 : 다중 파일 선택과 출력

 

React로 파일을 선택하고, 선택된 파일 목록을 화면에 표시하는 방법

---

 

기능 설명

 

1. 파일 입력 처리 : 사용자가 <input type="file">로 파일을 선택하면, handleFileChange 함수가 호출된다. 선택된 파일들은 setSelectedFiles를 통해 상태로 관리된다.
2. 파일 목록 출력 :  선택된 파일들은 배열로 저장되며, selectedFiles 상태에 저장된 각 파일의 이름과 크기를 화면에 출력한다.
3. 다중 파일 선택 : multiple 속성을 사용하여 여러 파일을 선택할 수 있다.

 

코드 예시

import React, { useState } from "react";

function FileInputExample() {
  const [selectedFiles, setSelectedFiles] = useState([]);

  const handleFileChange = (event) => {
    const files = Array.from(event.target.files);
    setSelectedFiles(files);
  };

  return (
    <div>
      <h3>파일 입력</h3>
      <input
        type="file"
        multiple
        onChange={handleFileChange} // 파일 변경 이벤트 처리
      />
      <h4>선택된 파일들:</h4>
      <ul>
        {selectedFiles.map((file, index) => (
          <li key={index}>
            {file.name} ({(file.size / 1024).toFixed(2)} KB)
          </li>
        ))}
      </ul>
    </div>
  );
}

export default FileInputExample;

 

• <input type="file" multiple />로 여러 파일을 선택할 수 있다.
• 선택된 파일들은 selectedFiles 상태에 저장되며, 화면에 출력된다.
• 파일의 이름과 크기를 출력하여 사용자가 선택한 파일 정보를 쉽게 알 수 있다.