react 17, Typescript 환경에서 FilesInBucket 함수로 가져와서 해당 file 만큼 반복해서 deleteFileOfIndex(idx) 호출하여 삭제

react 17, Typescript 환경에서 fiels: T_UploadableFile[] =[]; getFilesInBucket = () => { return this.files; }; fileReset 함수에 const file = this.getFilesInBucket 함수로 가져와서 해당 file 만큼 반복해서 deleteFileOfIndex(idx) 호출하여 삭제

 

1. files: T_UploadableFile[] = [] — 파일 배열 상태
2. getFilesInBucket() — 현재 파일 배열 반환
3. fileReset() — 현재 버킷에 있는 모든 파일을 순서대로 deleteFileOfIndex(idx) 호출해서 삭제

---

import React, { useState } from "react";

type T_UploadableFile = {
  name: string;
  size: number;
  // 필요에 따라 필드 추가
};

const FileManager: React.FC = () => {
  const [files, setFiles] = useState<T_UploadableFile[]>([
    { name: "file1.txt", size: 1000 },
    { name: "file2.txt", size: 2000 },
    { name: "file3.txt", size: 3000 },
  ]);

  // 현재 파일 목록 반환
  const getFilesInBucket = () => {
    return files;
  };

  // 특정 인덱스의 파일 삭제
  const deleteFileOfIndex = (idx: number) => {
    setFiles((prev) => prev.filter((_, index) => index !== idx));
  };

  // 모든 파일 삭제
  const fileReset = () => {
    const currentFiles = getFilesInBucket();
    // 역순으로 삭제해야 index 밀림 문제 없음
    for (let i = currentFiles.length - 1; i >= 0; i--) {
      deleteFileOfIndex(i);
    }
  };

  return (
    <div>
      <h3>파일 목록</h3>
      <ul>
        {files.map((file, idx) => (
          <li key={idx}>
            {file.name} ({file.size} bytes){" "}
            <button onClick={() => deleteFileOfIndex(idx)}>삭제</button>
          </li>
        ))}
      </ul>
      <button onClick={fileReset}>모든 파일 삭제</button>
    </div>
  );
};

export default FileManager;

포인트 설명

• index 밀림 문제: 배열을 앞에서부터 삭제하면 다음 인덱스들이 하나씩 당겨지기 때문에, 역순(length - 1 → 0)으로 순회하면서 삭제합니다.
• getFilesInBucket()에서 상태를 그대로 반환하도록 구현.
• deleteFileOfIndex()는 filter로 특정 index를 제외하는 방식으로 구현.