React 파일 관리자를 만들어 봅시다. 9장: FileManager 후크 및 컨텍스트

지난 기사에서 우리는 디렉토리 이름과 아이콘을 표시하기 위해 사이드바 노드를 업데이트했지만 먼저 파일 관리자 구성 요소 목록의 어느 곳에서나 액세스할 수 있는 파일 관리자를 얻는 방법이 필요합니다. 이에 대한 컨텍스트를 만들어 보겠습니다.

파일 관리자 컨텍스트

현재 파일 관리자를 쉽게 캡처할 수 있는 컨텍스트를 만들어 봅시다.
contexts/FileManagerContext.tsx 파일을 만들고 다음 코드를 추가합니다.

// contexts/FileManager.context.tsx
import { createContext } from "react";
import FileManager from "../utils/FileManager";

const FileManagerContext = createContext<FileManager | null>(null);

export default FileManagerContext;

이제 FileManager 구성 요소를 컨텍스트 공급자로 래핑하겠습니다.

// FileManager.tsx
import { Grid, Modal } from "@mantine/core";
import BaseFileManager from "app/file-manager/utils/FileManager";
import { useCallback, useEffect, useRef, useState } from "react";
import FileManagerContext from "../../contexts/FileManagerContext";
import { Node } from "../../types/FileManager.types";
import Content from "./Content";
import { BodyWrapper } from "./FileManager.styles";
import { FileManagerProps } from "./FileManager.types";
import Sidebar from "./Sidebar";
import Toolbar from "./Toolbar";

export default function FileManager({
  open,
  onClose,
  rootPath,
}: FileManagerProps) {
  const [isLoading, setIsLoading] = useState(true);
  const [currentDirectoryNode, setCurrentDirectoryNode] = useState<Node>();
  const [rootDirectoryNode, setRootDirectoryNode] = useState<Node>();

  const { current: fileManager } = useRef(new BaseFileManager());

  // load the given directory path
  const load = useCallback(
    (path: string, isRoot = false) => {
      setIsLoading(true);

      fileManager.load(path).then(node => {
        setCurrentDirectoryNode(node);

        setIsLoading(false);
        if (isRoot) {
          setRootDirectoryNode(node);
        }
      });
    },
    [fileManager],
  );

  // load root directory
  useEffect(() => {
    if (!rootPath || !open) return;

    load(rootPath, true);
  }, [rootPath, fileManager, open, load]);

  return (
    <FileManagerContext.Provider value={fileManager}>
      <Modal size="xl" opened={open} onClose={onClose}>
        <Toolbar />
        <BodyWrapper>
          <Grid>
            <Grid.Col span={3}>
              <Sidebar rootDirectory={rootDirectoryNode} />
            </Grid.Col>
            <Grid.Col span={9}>
              <Content />
            </Grid.Col>
          </Grid>
        </BodyWrapper>
      </Modal>
    </FileManagerContext.Provider>
  );
}

FileManager.defaultProps = {
  rootPath: "/",
};

파일 관리자 후크

컨텍스트를 만들었으므로 이제 구성 요소의 어디에서나 파일 관리자를 가져오는 간단한 후크를 만들어 보겠습니다.
hooks/useFileManager.ts 파일을 만들고 다음 코드를 추가합니다.

import { useContext } from "react";
import FileManagerContext from "../contexts/FileManagerContext";

export default function useFileManager() {
  const fileManager = useContext(FileManagerContext);

  if (!fileManager) {
    throw new Error("useFileManager must be used within FileManagerProvider");
  }

  return fileManager;
}

이 시점에서 이제 useFileManager 후크를 사용하여 파일 관리자 구성 요소의 어느 곳에서나 파일 관리자를 가져올 수 있습니다.

이제 다음 장에서 수행할 활성 사이드바 노드를 가리킬 준비가 되었습니다.

파일 관리자 공용 속성

빠른 액세스를 위해 속성을 공개하여 빠르게 액세스할 수 있도록 하겠습니다.

// file-manager/utils/FileManager.ts
import fileManagerService from "../services/file-manager-service";
import { Node } from "../types/FileManager.types";

export default class FileManager {
  /**
   * Root path
   */
  public rootPath = "/";

  /**
   * Current directory path
   */
  public currentDirectoryPath = "/";

  /**
   * Current directory node
   */
  public currentDirectoryNode?: Node;

  /**
   * Set root path
   */
  public setRootPath(rootPath: string): FileManager {
    this.rootPath = rootPath;
    return this;
  }

  /**
   * Load the given path
   */
  public load(path: string): Promise<Node> {
    return new Promise((resolve, reject) => {
      fileManagerService
        .list(path)
        .then(response => {
          this.currentDirectoryPath = path;
          this.currentDirectoryNode = response.data.node;
          resolve(this.currentDirectoryNode as Node);
        })
        .catch(reject);
    });
  }
}

기사 저장소

Github Repository에서 챕터 파일을 볼 수 있습니다.

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

지금 어디 있는지 말해줘

이 시리즈를 저와 함께 후속 조치하는 경우 현재 위치와 어려움을 겪고 있는 부분을 알려주시면 최대한 도와드리겠습니다.

살람.