React 애플리케이션에서 Zusstand 사용

이 게시물에서는 상태 관리 라이브러리 중 하나인 Zusstand를 자세히 살펴보겠습니다.
Redux가 현재 프로젝트에 너무 복잡하거나 무겁다고 생각하는 경우 React 애플리케이션 개발을 위한 Redux의 좋은 대안입니다.

주스탄트란?

Zusstand(영어로 '상태'를 의미하는 독일어 단어) - 상태 관리 라이브러리. 공식 문서에서는 이를 "작고 빠르고 확장 가능한 베어본 상태 관리 솔루션"이라고 합니다.
"zombie child" problem, React 동시성 및 혼합 렌더러 간의 컨텍스트 손실과 같은 문제를 해결하는 데 도움이 됩니다.
이러한 문제에 대해 자세히 알아보려면 다음 링크를 참조하세요.

반응 동시성 - https://github.com/bvaughn/rfcs/blob/useMutableSource/text/0000-use-mutable-source.md .

컨텍스트 손실 - https://github.com/facebook/react/issues/13332
그리고 그것의 가장 좋은 점은 그것이 제공하는 저장소가 후크이고 그 안에 객체나 기능을 넣을 수 있다는 것입니다. 얼마나 멋진 일입니까!

Zusstand를 사용하는 방법?

아래에서 React 프로젝트에서 Zusstand를 사용하는 방법에 대한 단계별 가이드를 찾을 수 있습니다.
단계를 따르기 전에 CRA 또는 Vite를 사용하여 반응 프로젝트를 생성할 수 있고 실행 중인지 확인하십시오.

1단계 - 가져오기

이 라이브러리는 npm 또는 yarn을 사용하여 매우 쉽게 프로젝트로 가져올 수 있습니다.

npm install zustand

yard add zustand

2단계 - 스토어 생성

Zusstand는 애플리케이션의 모든 구성 요소에서 상태를 사용할 수 있는 가능성을 제공합니다. 그러기 위해서는 상태에 대한 저장소를 만들어야 합니다.
여기서는 간단한 To-Do 앱을 예로 사용하겠습니다.
프로젝트 파일에서 'store'라는 폴더를 만들고 이 폴더에 'useToDoStore.ts'라는 이름의 파일을 만듭니다.
Zusstand 스토어는 후크이므로 시작 부분에 'use'로 이름을 지정해야 합니다( rule of custom hooks ).

내부'useToDoStore.ts' 파일에서 먼저 할 일에 대한 인터페이스를 만듭니다.

interface ToDo {
  id: string;
  title: string;
}

그런 다음 ToDoStore에 대한 인터페이스를 생성합니다. 여기에는 ToDos의 배열과 ToDos를 생성, 업데이트 및 삭제하는 메서드가 포함됩니다.

interface ToDoStore {
  toDos: Todo[];
  createToDo: (title: string) => void;
  updateToDo: (id: string, title: string) => void;
  deleteToDo: (id: string) => void;
}

이제 우리는 계속해서 실제로 상점을 만들 수 있습니다. 이렇게 하려면 Zusstand 라이브러리에서 특정 메서드create를 가져와서 이 메서드를 사용하여 저장소를 만들어야 합니다.

import create from "zustand";

export const useToDoStore = create<ToDoStore>((set, get) => ({
  todos: [], // our array of todos is empty but
             // it could be predefined as well
  createToDo: (title) => {},
  updateToDo: (id, title) => {},
  deleteToDo: (id) => {},
}));

방법create은 다음 두 가지 중요한 기능에 대한 액세스를 제공합니다.

set() - 이 함수는 현재 상태를 업데이트합니다

.

get() - 이 함수는 현재 상태에 대한 액세스를 외부에 제공합니다.
이러한 함수는 클래스의 setter 및 getter와 동일한 방식으로 작동합니다. 우리는 ToDos에 대한 저장 기능을 정의할 때 그것들을 사용할 것입니다.

3단계 - 함수 만들기

여기서는 set()의 get() 및 create 함수를 사용하여 스토어 함수가 수행할 작업을 정의합니다.

todos를 생성하는 함수부터 시작하겠습니다.

  createToDo: (title) => {
  const { todos } = get(); // first we get all todos
    const newTodo = {
      id: generateId(),// helper function to create ID
      title,
    };
    set({
      todos: [...todos, newTodo]
    });
  },
}

todos를 업데이트하는 함수를 만드는 것보다:

 updateToDo: (id: string, title: string) => {
    const { todos } = get();
    set({
      todos: todos.map(todo =>({
        ...todo,
        title: todo.id === id? title : todo.id
      }))
    })
  }

그리고 todo를 삭제하는 기능:

deleteToDo: (id: string) => {
    const { todos } = get();
    set({
      todos: todos.filter(todo => todo.id !== id)
    })
  },

축하합니다. 이제 스토어가 생겼습니다 :) 사용하겠습니다!

4단계 - 스토어 사용

저장소를 사용하려면 구성 요소(예: ToDoList.tsx)가 있는 파일로 이동하고 ToDoStore를 가져오고 후크에서 상태 및/또는 필요한 메서드를 분해합니다. 모든 구성 요소에서 모든 방법을 사용하거나 특정 방법만 사용할 수 있습니다.

 const [todos, createToDo, updateToDo, deleteToDo] = useToDoStore((state) => [
    state.todos,
    state.createToDo,
    state.updateToDo,
    state.deleteToDo,
  ]);

이제 상태를 사용해야 하는 특정 구성 요소의 파일에서 사용할 수 있습니다. 공급자 없이 어디에서나 후크를 사용합니다.

결론

이 라이브러리는 작고 사용하기 쉽습니다

.

변경 시에만 구성 요소를 렌더링함

컨텍스트 제공자가 필요하지 않음

은 React

없이 사용할 수 있습니다.

Zusstand 및 제안 내용에 대해 자세히 알아보려면 공식 페이지https://github.com/pmndrs/zustand를 방문하십시오.