상태 관리는 최신 애플리케이션 개발의 중요한 측면이며, React Native에서 상태를 효과적으로 관리하면 앱의 성능과 유지 관리성이 크게 향상될 수 있습니다. React용 최소한의 상태 관리 라이브러리인 Zustand는 React Native 애플리케이션에서 상태를 처리하기 위한 우아하고 간단한 솔루션을 제공합니다. 이 블로그에서는 Zustand가 어떻게 작동하는지, 그리고 왜 이것이 React Native 프로젝트에 적합한 선택인지 살펴보겠습니다.
Zustand는 React 애플리케이션을 위한 작고 빠르며 확장 가능한 상태 관리 솔루션입니다. "국가"를 의미하는 독일어 단어에서 파생된 이름은 국가를 효율적으로 관리하는 주요 기능을 반영합니다. Zustand는 단순성과 사용 용이성으로 인해 단연 돋보이며 최소한의 상용구 코드로 상태 저장소를 생성할 수 있습니다.
먼저 React Native 프로젝트에 Zustand를 설치해야 합니다. 터미널을 열고 다음을 실행하세요.
npm install zustand
또는
yarn add zustand
Zustand는 상태를 관리하기 위해 스토어를 사용합니다. 저장소는 상태를 보유하고 이를 업데이트하는 메소드를 제공하는 JavaScript 객체입니다.
여기서
a) 설정
목적: 매장 상태를 업데이트합니다.
작동 방식: 상태를 수정하는 데 사용합니다. 현재 상태를 받아 새 상태를 반환하는 함수를 제공합니다.
b) 받기
목적: 매장의 현재 상태를 읽어봅니다.
작동 방식: 이를 사용하여 읽거나 결정을 내리기 위해 현재 상태에 액세스합니다.
다음은 Zustand 스토어 생성 및 사용법에 대한 간단한 예입니다.
myStore1.jsx
import create from 'zustand';
// Create the store
const myStore1 = create((set, get) => ({
items: [], // Initial state
// Action to fetch items from an API
fetchItems: async () => {
try {
const response = await fetch('https://api.example.com/items'); // Replace with your API URL
const data = await response.json();
set({ items: data });
} catch (error) {
console.error('Failed to fetch items:', error);
}
},
// Action to add an item
addItem: (item) => set((state) => ({
items: [...state.items, item],
})),
// Action to remove an item
removeItem: (id) => set((state) => ({
items: state.items.filter(item => item.id !== id),
})),
// Action to get the count of items
getItemCount: () => get().items.length,
}));
export default myStore1;
사용법:
App.jsx
import React, { useEffect } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';
import myStore1 from './myStore1'; // Adjust the path to where your store file is located
const App = () => {
// Destructure actions and state from the store
const { items, fetchItems, addItem, removeItem, getItemCount } = myStore1();
// Fetch items when the component mounts
useEffect(() => {
fetchItems();
}, [fetchItems]);
const handleAddItem = () => {
const newItem = { id: Date.now(), name: 'New Item' };
addItem(newItem);
};
const handleRemoveItem = (id) => {
removeItem(id);
};
return (
<View style={styles.container}>
<Text style={styles.header}>Item List ({getItemCount()})</Text>
<Button title="Add Item" onPress={handleAddItem} />
<FlatList
data={items}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<View style={styles.item}>
<Text>{item.name}</Text>
<Button title="Remove" onPress={() => handleRemoveItem(item.id)} />
</View>
)}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
},
header: {
fontSize: 24,
marginBottom: 16,
},
item: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 16,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
},
});
export default App;
이 예에서는:
Zustand는 기능 향상을 위해 미들웨어를 지원합니다. 예를 들어 지속 미들웨어를 사용하여 AsyncStorage/MMKV에서 상태를 저장하고 로드할 수 있습니다.
a) React Native Async Storage를 갖춘 Zustand
useScansStore.jsx
import AsyncStorage from '@react-native-async-storage/async-storage';
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
// Create the store
export const useScansStore = create()(
persist(
(set, get) => ({
fishes: 0, // Initial state
addAFish: () => set({ fishes: get().fishes + 1 }) // Function to update state
}),
{
name: "food-storage", // Key used to store the data
storage: createJSONStorage(() => AsyncStorage), // Use AsyncStorage for persistence
}
)
);
b) MMKV와 함께하는 Zustand
i) mmkv 구성 파일 Storage.jsx를 생성합니다
import { MMKV } from "react-native-mmkv";
export const storage = new MMKV({
id: 'my-app-storage',
encryptionKey: 'some_encryption_key'
})
export const mmkvStorage = {
setItem: (key, value) => {
storage.set(key, value)
},
getItem: (key) => {
const value = storage.getString(key)
return value ?? null
},
removeItem: (key) => {
storage.delete(key)
},
}
ii)ScansStore.jsx를 사용
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import mmkvStorage from './mmkvStorage'; // Import the MMKV storage configuration
// Create the store
export const useScansStore = create()(
persist(
(set, get) => ({
fishes: 0, // Initial state
addAFish: () => set({ fishes: get().fishes + 1 }) // Function to update state
}),
{
name: "food-storage", // Key used to store the data
storage: createJSONStorage(() => mmkvStorage), // Use MMKV for persistence
}
)
);
Zustand는 React Native 애플리케이션의 상태 관리에 대한 최소한의 효율적인 접근 방식을 제공합니다. 간단한 API, 반응성 및 미들웨어 지원으로 인해 소규모 프로젝트와 대규모 프로젝트 모두에서 상태를 관리하는 데 탁월한 선택이 됩니다. 이 블로그에 설명된 예제와 모범 사례를 따르면 Zustand를 React Native 앱에 원활하게 통합하고 더 깨끗하고 유지 관리가 쉬운 상태 관리 솔루션을 즐길 수 있습니다.
관련 게시물:
https://dev.to/ajmal_hasan/react-native-mmkv-5787
https://dev.to/ajmal_hasan/reactotron-setup-in-react-native-redux-applications-4jj3
위 내용은 Zustand를 사용하여 React Native에서 상태 관리 단순화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
