Zustand, 언제, 어떻게, 왜

목차

1. 국가관리개론
2. Zustand의 이해
3. 상태 유형
4. Zustand 시작하기
5. Zustand의 주요 기능
6. Zustand 구현
7. Zustand와 기타 상태 관리 솔루션 비교
8. Zustand 시스템 설계
9. Zustand의 상태 유지
10. React 구성 요소 외부에서 Zustand 사용
11. 실제 사례
12. 결론
13. 팁: Zusstand로 비동기 코드 처리

1. 상태 관리 소개

상태 관리는 현대 웹 개발, 특히 복잡한 애플리케이션에서 중요한 측면입니다. 여기에는 시간이 지남에 따라 변경될 수 있는 데이터를 처리하고 이 데이터가 전체 애플리케이션에서 일관되게 표시되도록 보장하는 작업이 포함됩니다. 효과적인 상태 관리는 애플리케이션을 더욱 예측 가능하고 유지 관리 가능하게 만듭니다.

2. Zustand 이해

Zustand는 React 애플리케이션을 위한 작고 빠르며 확장 가능한 상태 관리 솔루션입니다. Jared Palmer와 Daishi Kato가 만든 Zustand는 다른 솔루션에 비해 상태 관리를 덜 번거롭게 만드는 간단하고 직관적인 API를 제공합니다.

3. 상태의 종류

Zustand에 대해 자세히 알아보기 전에 웹 애플리케이션의 다양한 상태 유형을 이해해 보겠습니다.

1. 로컬 상태: 구성 요소에 특정한 상태이며 애플리케이션의 다른 부분과 공유할 필요가 없습니다.
2. 전역 상태: 애플리케이션 전체의 여러 구성 요소에서 액세스하고 수정해야 하는 상태
3. 원격 상태: 외부 소스(일반적으로 API)에서 가져온 데이터를 나타내는 상태입니다.

Zustand는 로컬 및 전역 상태 관리에 탁월하며 원격 상태 관리용 솔루션과 통합될 수 있습니다.

4. Zustand 시작하기

Zustand 사용을 시작하려면 먼저 npm, Yarn 또는 pnpm을 통해 설치하세요.

npm install zustand
# or
yarn add zustand
# or
pnpm add zustand

5. Zustand의 주요 기능

Zustand에는 눈에 띄는 여러 기능이 있습니다.

1. 단순성: Zustand에는 최소한의 API가 있어 쉽게 배우고 사용할 수 있습니다.
2. 상용구 없음: 다른 상태 관리 솔루션과 달리 Zustand에는 설정 코드가 거의 필요하지 않습니다.
3. 후크 기반: Zustand는 React Hooks를 활용하여 최신 React 개발에 기본적으로 사용되는 느낌을 줍니다.
4. TypeScript 지원: Zustand는 TypeScript와 잘 작동하여 뛰어난 유형 추론을 제공합니다.
5. 미들웨어 지원: Zustand를 사용하면 미들웨어를 통해 기능을 확장할 수 있습니다.
6. Devtools 지원: Zustand는 디버깅을 위해 Redux DevTools와 잘 통합됩니다.
7. 프레임워크에 구애받지 않음: 주로 React와 함께 사용되지만 Zustand는 모든 JavaScript 환경에서 사용할 수 있습니다.

6. Zustand 구현

Zustand의 기본 구현을 살펴보겠습니다.

import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

function BearCounter() {
  const bears = useStore((state) => state.bears)
  return <h1>{bears} around here...</h1>
}

function Controls() {
  const increasePopulation = useStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

이 예에서는 Bears 상태와 이를 수정하는 두 가지 작업이 있는 저장소를 만듭니다. 그런 다음 BearCounter 및 Controls 구성 요소는 useStore 후크를 사용하여 상태에 액세스하고 수정할 수 있습니다.

7. Zustand와 기타 상태 관리 솔루션 비교

Zustand를 다른 인기 있는 상태 관리 솔루션과 비교해 보겠습니다.

Zustand 대 Redux

Zustand의 장점:

• 상용구를 줄이고 더 간단한 API
• 액션 생성자나 스위치 문이 필요하지 않습니다
• 더 작은 번들 크기

단점:

• 덜 확립된 생태계
• 더 적은 미들웨어 옵션

Zustand 대 MobX

Zustand의 장점:

• 더 간단하고 덜 마법적인 API
• 대규모 애플리케이션을 위한 더 나은 성능

단점:

• 기본적으로 덜 반응적입니다
• 기본적으로 계산된 값이 없습니다

Zustand 대 반동

Zustand의 장점:

• 간단한 정신 모델
• React 외부에서 작동

단점:

• 덜 세분화된 반응성
• 아톰 패밀리 개념이 내장되어 있지 않습니다

8. Zustand의 시스템 설계

Zustand의 시스템 설계는 몇 가지 주요 원칙을 기반으로 합니다.

1. Single store: Zustand encourages the use of a single store for all application state.
2. Immutability: State updates are handled immutably, ensuring predictable behavior.
3. Subscriptions: Components subscribe to specific parts of the state, re-rendering only when those parts change.
4. Middleware: Zustand uses a middleware system for extending functionality.

This design allows Zustand to be both simple and powerful, providing excellent performance even in large applications.

9. Persisting State with Zustand

Zustand makes it easy to persist state, which is crucial for many applications. Here's an example using the persist middleware:

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

const useStore = create(persist(
  (set, get) => ({
    fishes: 0,
    addAFish: () => set({ fishes: get().fishes + 1 }),
  }),
  {
    name: 'food-storage', // unique name
    getStorage: () => localStorage, // (optional) by default, 'localStorage' is used
  }
))

This will automatically save the state to localStorage and rehydrate it when the app reloads.

10. Using Zustand Outside React Components

One of Zustand's strengths is that it can be used outside of React components. This is particularly useful for integrating with other parts of your application or for testing:

const { getState, setState } = useStore

// Getting state
console.log(getState().bears)

// Setting state
setState({ bears: 10 })

// Using actions
getState().increasePopulation()

11. Real-World Examples

Let's look at some real-world examples of using Zustand:

Authentication State

import { create } from 'zustand'

const useAuthStore = create((set) => ({
  user: null,
  isAuthenticated: false,
  login: (userData) => set({ user: userData, isAuthenticated: true }),
  logout: () => set({ user: null, isAuthenticated: false }),
}))

// Usage in a component
function LoginButton() {
  const { isAuthenticated, login, logout } = useAuthStore()

  const handleAuth = () => {
    if (isAuthenticated) {
      logout()
    } else {
      // Simulate login
      login({ id: 1, name: 'John Doe' })
    }
  }

  return (
    <button onClick={handleAuth}>
      {isAuthenticated ? 'Logout' : 'Login'}
    </button>
  )
}

Shopping Cart

import { create } from 'zustand'

const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  removeItem: (itemId) => set((state) => ({
    items: state.items.filter((item) => item.id !== itemId),
  })),
  clearCart: () => set({ items: [] }),
  total: 0,
  updateTotal: () => set((state) => ({
    total: state.items.reduce((sum, item) => sum + item.price, 0),
  })),
}))

// Usage in components
function CartSummary() {
  const { items, total, removeItem } = useCartStore()

  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>
          {item.name} - ${item.price}
          <button onClick={() => removeItem(item.id)}>Remove</button>
        </div>
      ))}
      <div>Total: ${total}</div>
    </div>
  )
}

Theme Switcher

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

const useThemeStore = create(persist(
  (set) => ({
    theme: 'light',
    toggleTheme: () => set((state) => ({
      theme: state.theme === 'light' ? 'dark' : 'light',
    })),
  }),
  {
    name: 'theme-storage',
  }
))

// Usage in a component
function ThemeToggle() {
  const { theme, toggleTheme } = useThemeStore()

  return (
    <button onClick={toggleTheme}>
      Switch to {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  )
}

12. Conclusion

Zustand offers a refreshing approach to state management in React applications. Its simplicity, flexibility, and performance make it an excellent choice for both small and large projects. By reducing boilerplate and providing a straightforward API, Zustand allows developers to focus on building features rather than managing complex state logic.

While it may not have the extensive ecosystem of some older state management solutions, Zustand's design principles and ease of use make it a compelling option for modern React development. Its ability to work outside of React components and easy integration with persistence solutions further extend its utility.

For many React applications, Zustand strikes an excellent balance between simplicity and power, making it worth considering for your next project.

Bonus tips:

Zustand also handles asynchronous functions/code really well and without the need for any Middleware setup.

Let's talk a bit about that:

13. Handling Asynchronous Code with Zustand

One of Zustand's strengths is its simplicity in handling asynchronous operations without the need for additional middleware or complex setups. This makes it particularly easy to work with API calls, data fetching, and other asynchronous tasks.

How Zustand Handles Asynchronous Code

Zustand's approach to asynchronous code is straightforward:

1. Direct Integration: Asynchronous functions can be defined directly in the store.
2. No Special Syntax: You don't need to use special action creators or thunks.
3. State Updates: You can update the state within async functions using the set function.
4. Error Handling: Error states can be managed directly within the async functions.

Implementing Asynchronous Code

Here's an example of how to implement asynchronous code in Zustand:

import { create } from 'zustand'

const useUserStore = create((set) => ({
  user: null,
  isLoading: false,
  error: null,
  fetchUser: async (userId) => {
    set({ isLoading: true, error: null });
    try {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      if (!response.ok) throw new Error('Failed to fetch user');
      const userData = await response.json();
      set({ user: userData, isLoading: false });
    } catch (error) {
      set({ error: error.message, isLoading: false });
    }
  },
}));

// Usage in a component
function UserProfile({ userId }) {
  const { user, isLoading, error, fetchUser } = useUserStore();

  React.useEffect(() => {
    fetchUser(userId);
  }, [userId]);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!user) return null;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

In this example:

1. We define an async fetchUser function directly in the store.
2. The function manages loading and error states alongside the user data.
3. We use the set function to update the state at different points in the async operation.
4. In the component, we can use the store's state and actions as usual, with React hooks handling the component lifecycle.

Benefits of Zustand's Approach to Async Code

1. Simplicity: No need for additional middleware or complex action creators.
2. Flexibility: You can structure your async logic however you prefer.
3. Readability: Async operations are defined close to the relevant state.
4. Easy Testing: Async functions can be easily unit tested.

Comparison with Other Solutions

Unlike Redux, which often requires middleware like Redux Thunk or Redux Saga for handling async operations, Zustand's approach is much more straightforward. This simplicity can lead to less boilerplate and a gentler learning curve, especially for developers new to state management.

MobX and Recoil also offer ways to handle async operations, but Zustand's approach might be considered more intuitive due to its direct use of async/await syntax without additional abstractions.

결론적으로 비동기에 대한

Zustand의 비동기 코드 처리는 단순성과 유연성이라는 철학을 잘 보여줍니다. 개발자가 특별한 구문이나 미들웨어 없이 스토어에서 직접 비동기 함수를 작성할 수 있도록 함으로써 Zusstand는 코드베이스를 깔끔하고 읽기 쉽게 유지하면서 복잡한 상태 작업을 쉽게 관리할 수 있게 해줍니다.

비동기 코드에 대한 이러한 접근 방식은 작은 번들 크기 및 손쉬운 설정과 같은 Zustand의 다른 기능과 결합되어 모든 규모의 프로젝트, 특히 상당한 비동기 상태 관리가 필요한 프로젝트에 탁월한 선택이 됩니다.

이 "다양한 가이드"가 전역 애플리케이션 상태를 관리하는 방법을 고민하는 모든 사람에게 유용하고 통찰력이 있었기를 바랍니다.
감사합니다. 즐거운 코딩하세요.

제 웹사이트 https://www.ricardogesteves.com을 살펴보세요

팔로우하세요 @ricardogesteves
X(트위터)

RicardoGEsteves (리카르도 에스테베스) · GitHub

풀스택 개발자 | 직관적이고 영향력 있는 사용자 경험을 만드는 데 열정적임 | 포르투갈 리스본에 본사를 두고 있나요? - 리카르도 Gsteves

github.com

위 내용은 Zustand, 언제, 어떻게, 왜의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!