React 파일 관리자를 만들어 봅시다 13장: 파일 정리하기

이 장은 더 이해하기 쉽고 이해하기 쉬운 방식으로 파일을 구성하는 방법에 관한 것입니다.

그것은 또한 가벼운 것이 될 것이고 우리는 모든 곳에서 놀게 될 것입니다.

먼저 몇 가지 색상을 해보자

코드 정리로 이동하기 전에 LoadingProgressBar 구성 요소에 멋진 색상을 추가하고 현재 로드 비율을 나타내는 레이블도 추가해 보겠습니다.

// LoadingProgressBar.tsx
import { Progress } from "@mantine/core";
import { useEffect, useState } from "react";
import useFileManager from "../../hooks/useFileManager";

export default function LoadingProgressBar() {
  const fileManager = useFileManager();
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    // let's create an interval that will update progress every 300ms
    let interval: ReturnType<typeof setInterval>;

    // we'll listen for loading state
    const loadingEvent = fileManager.on("loading", () => {
      setProgress(5);

      interval = setInterval(() => {
        // we'll increase it by 10% every 100ms
        // if it's more than 100% we'll set it to 100%
        setProgress(progress => {
          if (progress >= 100) {
            clearInterval(interval);
            return 100;
          }

          return progress + 2;
        });
      }, 100);
    });

    // now let's listen when the loading is finished
    const loadEvent = fileManager.on("load", () => {
      // clear the interval
      setProgress(100);

      setTimeout(() => {
        clearInterval(interval);

        // set progress to 0
        setProgress(0);
      }, 300);
    });

    // unsubscribe events on unmount or when use effect dependencies change
    return () => {
      loadingEvent.unsubscribe();
      loadEvent.unsubscribe();
    };
  }, [fileManager]);

  const mapProgressColor = () => {
    if (progress < 25) {
      return "blue";
    }

    if (progress < 50) {
      return "indigo";
    }

    if (progress < 75) {
      return "lime";
    }

    return "green";
  };

  return (
    <Progress
      size="lg"
      value={progress}
      striped
      label={progress > 0 ? `${progress}%` : undefined}
      color={mapProgressColor()}
      animate
    />
  );
}

여기서는 많이 말하지 않겠습니다. 코드는 자명합니다.

캡슐화

이전 장에서 살펴본 것처럼 더 많은 구성 요소를 추가했으며 이러한 구성 요소 중 일부는 고유한 유형과 스타일을 가지고 있으므로 각 구성 요소에 대한 디렉토리를 생성해 보겠습니다.
src/apps/front-office/file-manager/components/FileManager에 있는 모든 구성 요소를 components 디렉토리에 직접 내보낼 것입니다.

상대 경로

이 작업을 수행하기 전에 현재 디렉터리 외부에 있는 모든 상대 경로를 절대 경로로 변경해야 합니다.

예를 들어 파일 관리자 유형입니다.

전에

// FileManager.types.ts
import { Node } from "../../types/FileManager.types";

export type FileManagerProps = {
  /**
   * Root path to open in the file manager
   *
   * @default "/"
   */
  rootPath?: string;
  ...
};

후에

// FileManager.types.ts
import { Node } from "app/file-manager/types/FileManager.types";

export type FileManagerProps = {
  /**
   * Root path to open in the file manager
   *
   * @default "/"
   */
  rootPath?: string;
  ...
};

나머지 파일에 대해서도 마찬가지입니다.

I don't really like relative paths, let's make it absolute, i'll skip it in the article but you can see it in the repository's branch.

사이드바

Sidebar 구성 요소부터 시작하겠습니다.
Sidebar.types.ts 파일을 생성하고 Sidebar 구성 요소와 관련된 모든 유형을 파일로 이동합니다.
components 디렉토리에 직접 위치하도록 이동해야 합니다.

// Sidebar.types.ts
import { Node } from "../../../types/FileManager.types";

export type SidebarProps = {
  rootDirectory?: Node;
};

이제 Sidebar 구성 요소에서 유형 블록을 제거하고 새 유형을 가져옵니다.

또한 SidebarNode에 대한 별도의 디렉토리를 생성하지만 Sidebar 디렉토리 안에 있습니다.

이제 최종 구조는 다음과 같습니다.

핵심

FileManager라는 두 개의 동일한 이름이 있으므로 모든 작업을 수행하는 FileManager 구성 요소의 이름을 FileManager 구성 요소의 이름을 Kernel로 바꿔야 합니다.

또한 Kernel와 관련된 모든 유형을 Kernel.types.ts 파일로 이동합니다.

이를 위한 디렉토리를 만들고 모든 관련 파일을 디렉토리로 이동합니다.

또한 컨텍스트의 이름을 KernelContext로 바꾸고 후크의 이름을 useKernel로 바꿉니다.

이제 모든 파일을 살펴보고 적절하게 업데이트하겠습니다.

I advice you to see it in the repository so you know what you'll update.

각 디렉토리에 대한 인덱스

FileManager 구성 요소 가져오기를 확인한 경우 이전 수정 후 다음과 같이 표시됩니다.

import { Grid } from "@mantine/core";
import Content from "app/file-manager/components/Content";
import LoadingProgressBar from "app/file-manager/components/LoadingProgressBar";
import Sidebar from "app/file-manager/components/Sidebar";
import Toolbar from "app/file-manager/components/Toolbar";
import KernelContext from "app/file-manager/contexts/KernelContext";
import Kernel, { Node } from "app/file-manager/Kernel";

따라서 구성 요소에는 여러 수준, 컨텍스트 후크 및 커널 자체가 있습니다.

각 디렉토리에 index.ts 파일을 만들고 여기에서 모든 구성 요소를 내보내면 더 쉽게 만들 수 있습니다.

// hooks/index.ts
export { default as useKernel } from "./useKernel";
export { default as useLoading } from "./useLoading";

// contexts/index.ts
export { default as KernelContext } from "./KernelContext";

// components/index.ts
export { default as Content } from "./Content";
export { default } from "./FileManager";
export * from "./Sidebar";
export { default as Sidebar } from "./Sidebar";
export { default as Toolbar } from "./Toolbar";

이제 다음과 같이 가져오기를 직접 호출할 수 있습니다.

import { useLoading } from "app/file-manager/hooks";
import { Node } from "app/file-manager/Kernel";

전체 파일 관리자의 상위 인덱스

index.ts 디렉토리에 app/file-manager 파일을 생성하고 여기에서 모든 구성 요소를 내보냅니다.

// app/file-manager/index.ts
export * from "./components";
export { default } from "./components";
export * from "./contexts";
export * from "./hooks";
export * from "./Kernel";
export { default as Kernel } from "./Kernel";

내부 가져오기 및 순환 종속성에 주의하십시오.

예를 들어 FileManager 구성 요소에서 LoadingProgressBar에서 components/index를 호출할 수 없지만 직접 `app/front-office/로 호출해야 합니다. 파일 관리자/구성 요소/LoadingProgressBar.

마지막으로 import in HomePage 구성 요소를 업데이트하겠습니다.
`tsx
// HomePage.tsx
import Helmet from "@mongez/react-helmet";
👉🏻 import FileManager from "app/file-manager";

export default function HomePage() {
return (
<>

👉🏻
</>
);
}
`

Now we're gooooood, everything is clean and shiny.

기사 저장소

You can see chapter files in Github Repository

Don't forget the main branch has the latest updated code.

지금 어디 있는지 말해줘

If you're following up with me this series, tell me where are you now and what you're struggling with, i'll try to help you as much as i can.

Salam.