상태 관리는 현대 웹 개발, 특히 복잡한 애플리케이션에서 중요한 측면입니다. 여기에는 시간이 지남에 따라 변경될 수 있는 데이터를 처리하고 이 데이터가 전체 애플리케이션에서 일관되게 표시되도록 보장하는 작업이 포함됩니다. 효과적인 상태 관리는 애플리케이션을 더욱 예측 가능하고 유지 관리 가능하게 만듭니다.
Zustand는 React 애플리케이션을 위한 작고 빠르며 확장 가능한 상태 관리 솔루션입니다. Jared Palmer와 Daishi Kato가 만든 Zustand는 다른 솔루션에 비해 상태 관리를 덜 번거롭게 만드는 간단하고 직관적인 API를 제공합니다.
Zustand에 대해 자세히 알아보기 전에 웹 애플리케이션의 다양한 상태 유형을 이해해 보겠습니다.
Zustand는 로컬 및 전역 상태 관리에 탁월하며 원격 상태 관리용 솔루션과 통합될 수 있습니다.
Zustand 사용을 시작하려면 먼저 npm, Yarn 또는 pnpm을 통해 설치하세요.
npm install zustand # or yarn add zustand # or pnpm add zustand
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 후크를 사용하여 상태에 액세스하고 수정할 수 있습니다.
Zustand를 다른 인기 있는 상태 관리 솔루션과 비교해 보겠습니다.
Zustand의 장점:
단점:
Zustand의 장점:
단점:
Zustand의 장점:
단점:
Zustand의 시스템 설계는 몇 가지 주요 원칙을 기반으로 합니다.
This design allows Zustand to be both simple and powerful, providing excellent performance even in large applications.
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.
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()
Let's look at some real-world examples of using Zustand:
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>
)
}
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>
)
}
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>
)
}
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.
Zustand also handles asynchronous functions/code really well and without the need for any Middleware setup.
Let's talk a bit about that:
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.
Zustand's approach to asynchronous code is straightforward:
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:
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(트위터)
풀스택 개발자 | 직관적이고 영향력 있는 사용자 경험을 만드는 데 열정적임 | 포르투갈 리스본에 본사를 두고 있나요? - 리카르도 Gsteves
github.com
위 내용은 Zustand, 언제, 어떻게, 왜의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
