React를 사용하여 재귀적 파일 시스템 구축: 심층 분석-JS 튜토리얼-php.cn

React를 사용하여 재귀적 파일 시스템 구축: 심층 분석

Barbara Streisand

풀어 주다： 2024-09-29 14:19:30

원래의

339명이 탐색했습니다.

Building a Recursive File System with React: A Deep Dive

소개: React에서 재귀적 파일 시스템 만들기

현대 웹 개발에서는 대화형의 동적 파일 시스템을 만드는 것이 일반적인 요구 사항입니다. 문서 관리, 프로젝트 구성, 복잡한 데이터 구조 구축 등 어떤 작업을 하든 강력한 파일 시스템을 갖추는 것이 중요합니다. 이 블로그 게시물에서는 추가, 이름 변경 또는 삭제할 수 있는 중첩된 폴더와 파일에 중점을 두고 React에서 재귀 파일 시스템을 구축하는 방법을 살펴보겠습니다.

프로젝트 개요

재귀 파일 시스템 프로젝트는 사용자가 폴더 및 파일과 동적으로 상호 작용할 수 있는 파일 관리 시스템을 시뮬레이션하도록 설계되었습니다. 다음 기능을 지원합니다:

새 폴더 및 파일 추가: 기존 폴더 내에 새 폴더와 파일을 만듭니다.
항목 이름 바꾸기: 폴더 및 파일 이름을 변경합니다.
항목 삭제: 파일 시스템에서 폴더와 파일을 제거합니다.
중첩 구조: 중첩된 폴더와 파일을 처리하여 계층적 보기를 만듭니다.

주요 기능 및 구현

1. 재귀적 데이터 구조

프로젝트의 핵심은 파일 시스템을 나타내는 재귀적 데이터 구조입니다. 각 폴더에는 다른 폴더나 파일이 포함될 수 있으며, 각 파일이나 폴더에는 ID, 이름, 하위 항목(폴더의 경우)과 같은 속성이 있습니다.

폴더의 기본 구조는 다음과 같습니다.

const folder = {
  id: "1",
  name: "Documents",
  type: "folder",
  children: [
    { id: "2", name: "Resume.pdf", type: "file" },
    { id: "3", name: "CoverLetter.docx", type: "file" },
  ],
};

로그인 후 복사

2. 구성품

이 프로젝트에는 파일 시스템의 다양한 측면을 처리하기 위한 여러 주요 구성 요소가 포함되어 있습니다.

FileExplorer: 전체 파일 시스템을 표시하고 폴더 및 파일 렌더링을 처리합니다.

// src/components/FileExplorer.js
import React, { useState } from "react";
import Folder from "./Folder";
import File from "./File";

const FileExplorer = () => {
  const [files, setFiles] = useState(initialData); // initialData is your recursive data structure

  const addItem = (parentId, type) => {
    // Logic to add a folder or file
  };

  const renameItem = (id, newName) => {
    // Logic to rename a folder or file
  };

  const deleteItem = (id) => {
    // Logic to delete a folder or file
  };

  return (
    <div>
      {files.map((file) =>
        file.type === "folder" ? (
          <Folder
            key={file.id}
            folder={file}
            onAdd={addItem}
            onRename={renameItem}
            onDelete={deleteItem}
          />
        ) : (
          <File
            key={file.id}
            file={file}
            onRename={renameItem}
            onDelete={deleteItem}
          />
        )
      )}
    </div>
  );
};

export default FileExplorer;

로그인 후 복사

폴더: 폴더를 렌더링하고 중첩된 항목을 처리합니다.

// src/components/Folder.js
import React from "react";
import FileExplorer from "./FileExplorer";

const Folder = ({ folder, onAdd, onRename, onDelete }) => {
  return (
    <div>
      <h3>{folder.name}</h3>
      <button onClick={() => onAdd(folder.id, "folder")}>Add Folder</button>
      <button onClick={() => onAdd(folder.id, "file")}>Add File</button>
      <button onClick={() => onRename(folder.id, "New Name")}>Rename</button>
      <button onClick={() => onDelete(folder.id)}>Delete</button>
      {folder.children && <FileExplorer files={folder.children} />}
    </div>
  );
};

export default Folder;

로그인 후 복사

파일: 이름 바꾸기 및 삭제 옵션을 사용하여 개별 파일을 렌더링합니다.

// src/components/File.js
import React from "react";

const File = ({ file, onRename, onDelete }) => {
  return (
    <div>
      <p>{file.name}</p>
      <button onClick={() => onRename(file.id, "New Name")}>Rename</button>
      <button onClick={() => onDelete(file.id)}>Delete</button>
    </div>
  );
};

export default File;

로그인 후 복사

3. 상태 및 작업 처리

상태 관리는 파일 시스템 데이터를 관리하기 위해 useState와 같은 React 후크를 사용하여 처리됩니다. 항목 추가, 이름 변경, 삭제 등의 작업을 수행하면 그에 따라 상태가 업데이트됩니다.

const [files, setFiles] = useState(initialData);

const addItem = (parentId, type) => {
  // Logic to add a new item to the file system
};

const renameItem = (id, newName) => {
  // Logic to rename an existing item
};

const deleteItem = (id) => {
  // Logic to delete an item
};

로그인 후 복사