Immer를 사용한 파일 시스템 탐색 애플리케이션 만들기

27 Sep 2023

immer

파일 시스템 탐색 애플리케이션을 만들 때, 상태 관리는 중요한 요소입니다. React 애플리케이션에서는 Immer라는 라이브러리를 사용하여 불변성을 유지하면서 간편하게 상태를 업데이트할 수 있습니다.

Immer란 무엇인가요?

Immer는 불변성을 유지하면서 객체 또는 배열의 상태를 수정하는 것을 도와주는 JavaScript 라이브러리입니다. Immer를 사용하면 복잡한 불변성 로직을 작성할 필요 없이, 직관적인 방식으로 상태를 변경할 수 있습니다.

파일 시스템 탐색 애플리케이션의 기능

이번 예제에서는 간단한 파일 시스템 탐색 애플리케이션을 만들어보겠습니다. 애플리케이션은 다음과 같은 기능을 제공할 것입니다.

파일 및 폴더 목록 표시
폴더를 클릭하여 하위 폴더 탐색
새로운 폴더 생성
파일 및 폴더 이름 변경
파일 및 폴더 삭제

프로젝트 설정 및 폴더 구조

먼저, React 프로젝트를 설정한 후 필요한 패키지를 설치합니다. 아래 명령어를 사용하여 프로젝트를 생성합니다.

npx create-react-app file-explorer

프로젝트 디렉토리 구조는 다음과 같습니다.

file-explorer
├── src
│   ├── components
│   │   ├── File.js
│   │   ├── Folder.js
│   │   └── index.js
│   ├── App.js
│   └── index.js
└── package.json

컴포넌트 구현

애플리케이션을 구성하는 주요 컴포넌트는 File과 Folder입니다. 이들 컴포넌트는 각각 파일과 폴더를 나타내며, 클릭 이벤트를 통해 특정 폴더를 탐색하고, 이름을 변경하거나 삭제할 수 있습니다.

// File.js

import React from 'react';

const File = ({ name }) => {
  return (
    <div>
      <span>{name}</span>
    </div>
  );
};

export default File;

// Folder.js

import React from 'react';

const Folder = ({ name }) => {
  return (
    <div>
      <span>{name}</span>
    </div>
  );
};

export default Folder;

상태 관리

Immer를 사용하여 파일 시스템의 상태를 관리합니다. 상태는 다음과 같이 구성됩니다.

// index.js

import produce from 'immer';

const initialState = {
  currentFolder: '/',
  folderStructure: [
    {
      name: 'Documents',
      type: 'folder',
      children: [
        { name: 'Notes.txt', type: 'file' },
        { name: 'Images', type: 'folder', children: [] }
      ]
    },
    {
      name: 'Downloads',
      type: 'folder',
      children: [
        { name: 'Photos', type: 'folder', children: [] },
        { name: 'Videos', type: 'folder', children: [] }
      ]
    }
  ]
};

const reducer = (state = initialState, action) => {
  return produce(state, (draft) => {
    // 상태를 업데이트하는 액션들을 처리합니다.
  });
};

Immer를 사용한 상태 업데이트

Immer를 사용하여 상태를 업데이트하는 것은 매우 편리합니다. Immer는 produce 함수를 제공하며, 이 함수는 원래 상태와 수정할 함수를 인자로 받습니다. 수정 함수 내에서는 상태를 변경하는 로직을 작성할 수 있습니다. 이때, 상태는 불변성을 유지한 채로 업데이트됩니다.

const reducer = (state = initialState, action) => {
  return produce(state, (draft) => {
    switch (action.type) {
      // 상태를 업데이트하는 액션들을 처리합니다.
      case 'CREATE_FOLDER':
        // 새로운 폴더를 생성하는 로직을 작성합니다.
        break;
      case 'RENAME_ITEM':
        // 파일 또는 폴더의 이름을 변경하는 로직을 작성합니다.
        break;
      case 'DELETE_ITEM':
        // 파일 또는 폴더를 삭제하는 로직을 작성합니다.
        break;
      default:
        break;
    }
  });
};

마무리

이제 Immer를 사용하여 파일 시스템 탐색 애플리케이션을 만들기 위한 기본적인 구성을 알게 되었습니다. Immer를 통해 불변성을 유지하면서 상태를 업데이트할 수 있으므로, 복잡한 상태 관리 로직을 작성하는 데 도움이 됩니다.

다음 단계로, 컴포넌트의 클릭 이벤트와 액션을 통한 상태 업데이트 로직을 구현하고, 렌더링 로직을 작성하여 파일 시스템 탐색 애플리케이션을 완성해보세요.

#React #Immer #파일시스템 #탐색 #애플리케이션