Zusstand를 사용하여 React Hooks로 상태 관리 단순화

원래 게시된 기사 my blog .


상태 관리는 아마도 앱 개발에서 가장 어려운 부분 중 하나일 것입니다. 더 중요한 것은 바로잡기 위한 가장 중요한 부분이기도 합니다. 이 문서는 새로운 개념 없이 앱의 상태 관리를 단순화하는 방법에 관한 것입니다. 핵심에 후크가 있는 이 문제를 해결하기 위해 Zustand을 사용할 것입니다. 이 기사의 기본 사항을 다루면서 간단한 할 일 앱을 만들 것입니다. React Hooks이 모든 작업을 수행하는 데 사용되므로 기본 후크 지식만 있으면 Zustand 상태 관리를 통해 항해하는 데 필요한 모든 것입니다.

주스탠드란?

Zusstand는 간단하고 가볍고 빠르며 React 후크 기반 상태 관리입니다.

A small, fast and scaleable barebones state-management solution. Has a comfy API based on hooks, isn't boilerplate-y or opinionated, but still just enough to be explicit and flux-like.

특징

가벼움.

학습 곡선이 거의(후크) 또는 전혀 없습니다.

후크를 상태 소비의 기본 수단으로 만듭니다.

의견이 없습니다.

일시적인 업데이트.

편의성 외에도 Zustand은 복잡한 흐름, 과도하게 설계된 솔루션과 같은 다른 라이브러리의 일반적인 문제 중 일부를 해결합니다. 또한 Context loss issue , React concurrency issues , Zombie child problem 과 같은 주요 기존 라이브러리 및 패턴과 관련하여 문서화된 몇 가지 일반적인 문제를 해결합니다.

사용 방법?

시연하기 위해 CRUD 작업으로 기본 할일 앱을 만들 것입니다. 우리는 상점을 만드는 것부터 시작할 것입니다. 그런 다음 할 일 배열을 초기화하고 목록에 할 일을 추가하는 함수를 추가합니다.

import create from 'zustand';

const useStore = create((set) => ({
  todos: [],
  add: (title) =>
    set((state) => ({ todos: [...state.todos, { title }] }))
}));

그런 다음 상점에서 정의한 state todo를 컴포넌트에 첨부합니다.

import { useStore } from './store';

function TodoList() {
  const todos = useStore((state) => state.todos);
  return (
    <div>
      {todos.map(({ title }) => (
        <div>{title}</div>
      ))}
    </div>
  );
}

마지막으로 정의한 추가 기능을 버튼 요소에 연결합니다. 입력 값을 할 일 항목의 제목으로 전달합니다.

import { useStore } from './store';

function TodoInput() {
  const [inputValue, setInputValue] = React.useState('');
  const add = useStore((state) => state.add);
  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={() => add(inputValue)}> Add </button>
    </div>
  );
}

그리고 짜잔, 우리는 작업하는 할 일 앱의 기초 버전을 가지고 있습니다. get 및 set의 동일한 패턴을 모든 종류의 작업에 대해 앱에서 사용할 수 있습니다. 같은 줄을 따라 toggleDone 및 remove 함수도 만들었습니다. 아래의 샌드박스에서 전체 기능을 확인할 수 있습니다.

고급 기능

대규모 프로젝트의 경우 CRUD 작업보다 훨씬 더 많은 작업이 필요하지만 Zustan에서도 해당 작업을 처리할 수 있습니다. 이미 다음을 지원합니다.

비동기 작업: 준비가 될 때마다 set를 호출하면 됩니다. 작업이 비동기인지 아닌지는 중요하지 않습니다.

미들웨어: 원하는 방식으로 미들웨어를 구성하고 연결합니다.

*여러 저장소 가져오기 *: 원하는 만큼 선택기를 만들 수 있습니다.

Devtools: 내장된 devtool 미들웨어를 제공합니다.

Redux와 함께 사용: 여전히 리듀서와 액션 패턴을 사용하고 싶다면 여기에서도 따라할 수 있습니다.

중첩 상태 처리: 중첩 구조를 조작하는 것은 지루합니다. 하지만 immer을 미들웨어로 사용할 수 있습니다.

단점

Zusstand의 문서는 간결하고 흐름이 좋으며 이해하기가 매우 쉽지만 여러 미들웨어 처리, 중첩 상태 관리, 더 나은 성능을 위한 코드 최적화와 같은 일부 섹션에서는 좀 더 자세히 설명하고 예제를 사용할 수 있습니다. 따라서 Zustand 에 기여하는 것을 고려하십시오.

Caution: You Might Not Need Redux(or any other state management library)

결론

Zusstand를 사용하는 것은 매우 편리하며 시작하기 위해 많은 정보가 필요하지 않습니다. 노련한 상태 관리 솔루션과 비교할 때 DX에 관해서는 확실히 우위가 있습니다. 단순성, 유연성 및 의견이 없는 특성으로 인해 매력적인 옵션이 됩니다. 따라서 상태 관리를 다루는 초보자이거나 깊이 중첩된 구조를 다루지 않는 프로젝트가 있는 경우 Zusstand가 귀하의 프로젝트에 매우 적합할 수 있습니다.