Zustand를 사용하여 React Native에서 상태 관리 단순화

상태 관리는 최신 애플리케이션 개발의 중요한 측면이며, React Native에서 상태를 효과적으로 관리하면 앱의 성능과 유지 관리성이 크게 향상될 수 있습니다. React용 최소한의 상태 관리 라이브러리인 Zustand는 React Native 애플리케이션에서 상태를 처리하기 위한 우아하고 간단한 솔루션을 제공합니다. 이 블로그에서는 Zustand가 어떻게 작동하는지, 그리고 왜 이것이 React Native 프로젝트에 적합한 선택인지 살펴보겠습니다.

---

주스탠드란 무엇인가요?

Zustand는 React 애플리케이션을 위한 작고 빠르며 확장 가능한 상태 관리 솔루션입니다. "국가"를 의미하는 독일어 단어에서 파생된 이름은 국가를 효율적으로 관리하는 주요 기능을 반영합니다. Zustand는 단순성과 사용 용이성으로 인해 단연 돋보이며 최소한의 상용구 코드로 상태 저장소를 생성할 수 있습니다.

Zustand의 주요 기능

• 최소 API: Zustand는 상태 관리를 직관적이고 간단하게 만드는 간단한 API를 제공합니다.
• 공급자 구성 요소 없음: 다른 상태 관리 라이브러리와 달리 Zustand에는 공급자 구성 요소가 필요하지 않으므로 구성 요소 트리를 단순화할 수 있습니다.
• 반응성: Zustand는 React의 내장 후크와 원활하게 통합되어 반응성이 뛰어나고 효율적입니다.
• 미들웨어 지원: Zustand는 지속성 및 로깅과 같은 향상된 기능을 위해 미들웨어를 지원합니다.

---

Zustand 시작하기

1. 설치

먼저 React Native 프로젝트에 Zustand를 설치해야 합니다. 터미널을 열고 다음을 실행하세요.

npm install zustand

또는

yarn add zustand

---

2. 스토어 생성

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;

이 예에서는:

• create는 저장소를 초기화하는 Zustand의 함수입니다.
• set은 스토어 업데이트를 위해 Zustand에서 제공하는 기능입니다.
• count는 매장에서 관리하는 상태입니다.
• 증가 및 감소는 상태를 수정하는 작업입니다.
• get은 매장의 현재 상태를 읽는 것입니다
• myStore1 후크를 사용하여 현재 상태 값과 작업 기능을 가져옵니다.

---

고급 사용법

1. 미들웨어

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의 후크 활용: Zustand는 React의 후크와 잘 통합되므로 useEffect 및 useCallback과 같은 후크를 활용하여 부작용을 관리하고 성능을 최적화하세요.

---

결론

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!