목차
머리말
왜 이 기술을 공유하고 싶나요?
Zustatnd 자체는 Redux에 비하면 비교적 새로운 기술이고, 제가 일할 때 팀에서 도입하려고 했던 프런트엔드 상태 관리 기술이기도 합니다. 실무적인 소개를 통해 몇 가지 경험과 생각을 얻었고, 이것이 이 글을 쓰게 된 계기가 되었습니다.
기존 아키텍처에는 어떤 문제가 있습니까?
상태 관리를 처리하기 위해 Redux를 사용하든 Context를 사용하든 나중에 이 프로젝트에 참여하는 엔지니어에게는 이해하는 데 확실히 시간이 걸릴 것입니다. Zustand의 주요 목표는 프런트 엔드 상태 관리를 상대적으로 간단하고 이해하기 쉽게 만드는 것입니다. 이 기능으로 인해 일부 회사에서는 Zustand를 선택합니다.
상태 관리 정보
Zustand를 소개하기 전에 "상태 관리"가 무엇인지부터 이야기해 볼까요?
현재 웹페이지는 점점 더 복잡해지고 있으며 프론트엔드와 백엔드 사이에는 차이가 있습니다. 프론트엔드는 화면 표현, UI/UX, 사용자 흐름, 다양한 장치에서 실행되는 버전이 있는지 여부에 더 중점을 두고 있습니다. 등.
백엔드는 데이터베이스 관리, 로그인, 등록 등을 포함하여 더욱 기능적입니다.
프론트엔드가 점점 복잡해지면서 프레임워크라는 개념이 등장하기 시작했는데, 현재 가장 많이 사용되는 프레임워크는 React, Vue, Angular 3가지 입니다.
프레임워크마다 다음과 같은 "상태 관리" 방법도 다릅니다.
React: 기본적으로 데이터를 관리하고 "상태"별로 렌더링하면 됩니다.
Vue: 데이터와 구성 요소의 "양방향 바인딩"이 있습니다.
React 프레임워크를 기반으로 크게 나누어 볼 수 있습니다.
지역 주
-
- 사용상태
-
- 사용감속기
문맥
-
- useContext
제3자
-
- 리덕스
-
- Mobx
-
- 주스탄
이것을 보면 이해할 수 있을 것입니다. React 프레임워크의 "상태 관리"는 이미 상당히 복잡합니다.
따라서 이 글에서는 Zustand에 대해서만 설명하고 예제를 사용하여 소개하겠습니다.
또한, 다음과 같은 전체 패키지 다운로드 비교를 통해 지난 1년간 Redux, Mobx, Zustand의 인기를 알 수 있습니다.
주스탠드란 무엇인가요?
Zustand의 공식 성명에 따르면 이것은 Flux와 Hook의 개념을 기반으로 한 가볍고 빠른 "상태 관리" 제품군입니다.
ps 위의 곰은 Zustand의 상징적인 마스코트입니다!
그중 Zustand는 좀비 자식 문제, React 동시성, 컨텍스트 손실과 같은 복잡한 React 상태 관리 문제를 해결하는 데에도 사용됩니다.
이러한 문제가 무엇인지 더 알고 싶으시면 다음 링크를 참조하세요.
좀비 어린이 문제:React Redux 파일
동시성 반응:공식 문서 반응
반응 컨텍스트 손실:스택 오버플로
우리는 또한 Zustand 관계자로부터 Redux를 물리치려는 야망을 알 수 있습니다.
Zustand 사용법
다음 두 가지 간단한 사용법은 JavaScript 사용자를 위한 것입니다.
첫 번째 스토어 만들기
Zustand는 Hook을 기반으로 구축되었으므로 가장 먼저 생성되는 것은 변수, 개체 및 함수를 포함할 수 있는 Custom Hook로 생성된 Store입니다.그리고 Set 및 Get을 사용하여 데이터의 "상태 관리"를 수행할 수 있습니다.
import create from 'zustand' const useBearStore = create((set) => ({ bears: 0, 증가Population: () => set((state) => ({ bears: state.bears + 1 })), RemoveAllBears: () => 설정({ 곰: 0 }), }))
Hook를 사용하기 때문에 어떤 컴포넌트에든 직접 로드하여 사용할 수 있습니다.
이러한 상태를 렌더링할 수도 있고, 단 몇 줄만으로 처리가 완료되는 것을 볼 수 있는데, 이는 Zustand에서는 큰 축복입니다.
여기서는 TypeScript 사용자를 위한 간단한 Zustand 예제도 제공합니다.
function BearCounter() { const bears = useBearStore((state) => state.bears) return <h1>여기 근처에 {곰} ...</h1>
} function Controls() { const 증가Population = useBearStore((state) => state.increasePopulation) return <button onclick="{increasePopulation}">하나</button>
}
Zustand TypeScript 작성 방법
Zustand에서는 create를 사용하여 새 상점을 생성합니다.
함수를 통해 전달하고 Hook을 통해 상태를 반환한 후 다시 렌더링합니다.
"zustand"에서 생성 type Product = { sku: string; string; string } type CartState = { products: Product[] cart: { [sku: string]: number } addToCart: (sku: string) = > void RemoveFromCart: (sku: string) => void } // 선택기 // ... // 초기 값과 상태를 변경하는 작업으로 저장소를 초기화합니다.export const useCart = create<CartState>(set => ( { 제품: [ // ... ], 장바구니: {}, // 작업 // ... }))
Redux와 Mobx의 작성 방법도 여기에 나와 있습니다. 독자는 차이점을 비교할 수도 있습니다. 그러나 이 기사에서는 Redux나 Mobx에 대해 설명하지 않고 Zusstand와 해당 상태 관리에 대해서만 설명합니다.
Redux TypeScript 작성 방법
import { createSlice,configureStore, PayloadAction } from "@reduxjs/toolkit" import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux" // 슬라이스 // 상태의 모양과 이를 변경하는 방법 정의 type ICart = { [ sku: 문자열]: 숫자 } const cartInitialState: ICart = {} const cartSlice = createSlice({ name: "cart",initialState: cartInitialState, Reducers: { // ... }, }) type IProduct = { sku: string; name: string; image: string } const productsInitialState: IProduct[] = [ // ... ] const productsSlice = createSlice({ name: "products",initialState: productsInitialState, Reducers: {}, }) // 작업 // ... // 선택기 // ... // 저장 내보내기 const store =configureStore({ Reducer: { cart: cartSlice.reducer, products: productsSlice.reducer, }, }) // ... const App = () => { return ( <Provider store={store}> <NavigationContainer> <Stack.Navigator>{/* ... */}</Stack.Navigator> <StatusBar style="auto" /> </NavigationContainer> < /제공자> ) }
Mobx TypeScript 작성 방법
import {types, Instance } from "mobx-state-tree" const Product =types.model({ sku:types.string, name:types.string, image:types.string, }) // 다음을 사용하여 데이터를 모델링하고 입력합니다. mobx 상태 트리 const CartStore = 유형 .model("CartStore", { products:types.array(Product), cart:types.map(types.number), }) // 상태를 변경하는 작업 .actions(store => ({ // ... })) // 뷰는 선택기와 같습니다. .views(self => ({ // ... })) type CartStoreType = Instance<typeof CartStore> // 상점을 사용하기 위해 후크를 가동합니다. 그리고 초기값을 제공합니다. let _cartStore: CartStoreType import const useCart = () => { if (!_cartStore) { _cartStore = CartStore.create({ products: [ // ... ], cart: {}, } ) } _cartStore 반환 }
Zustand 관계자에 따르면 위의 사항을 나열하고 여기에 간략하게 설명합니다.
리덕스
Redux 자체는 Actionin, View 및 State 프로세스를 갖춘 비교적 복잡한 상태 관리 도구입니다.
다음은 Redux의 공식 데이터 흐름도입니다. Redux의 상태 관리 도구를 처음부터 사용하려는 경우 학습 임계값이 상대적으로 높다는 것도 알 수 있습니다.
문맥
컨텍스트 자체는 상태 관리로 분류되지만 실제로는 상태를 트리거하는 중앙 집중식 방법에 더 가깝습니다.
Zustand와 비교하면 다양한 파일에 분산되어 관리가 어렵습니다.
결론
이 기술을 사용하면 얻을 수 있는 이점
Zustand를 통해 복잡한 비즈니스 로직 속의 데이터와 로직을 분리하고, 이러한 것들을 모듈화합니다. 가독성을 높이는 것 외에도 테스트 작성을 더 쉽게 만듭니다.
리뷰
Zustand 자체는 배우기 쉬운 상태 관리 도구이며, 작업 제품에서 사용하기에도 상대적으로 편리합니다. 상태를 설정하고 가져오거나 컴포넌트에서 사용하려는 사람들에게 적극 권장됩니다. 상태 관리 리더에서 작업하세요.
시청해주셔서 감사합니다~ 위 내용에 대해 궁금한 점이나 논의하고 싶은 사항이 있으시면 언제든지 메시지를 남겨주시거나 비공개 메시지를 보내주세요!
인용하다
https://github.com/pmndrs/zustand
https://react-redux.js.org/api/hooks#stale-props-and-zombie-children
https://docs.pmnd.rs/zustand/getting-started/comparison
한국어 
繁體中文 
English 
简体中文 
日本語 
Español