Zustand를 활용(5): 상태 리팩토링 및 모듈화

상태 리팩토링 및 모듈화

상태 모듈화 및 다중 상태 저장소 구현

내용:

• Zustand에서 상태 관리 코드를 모듈화하고 분리하는 전략을 학습합니다.
• 대형 프로젝트에서 상태 관리의 복잡성을 줄이기 위해 상태를 분리하고 구조화하는 방법을 다룹니다.
• 모듈화를 통해 코드 재사용성을 높이고, 여러 상태 저장소(store)를 효과적으로 관리하는 방법을 배웁니다.

주제:

• 상태 관리 모듈화 및 코드 분리 전략
• 대형 프로젝트에서 상태 분리 및 구조화
• 상태 저장소의 확장성과 유지보수성을 위한 설계 원칙

실습:

• 상태를 모듈화하여 관리할 수 있는 구조 만들기
• 여러 상태 저장소(store)를 만들어 각 저장소를 독립적으로 관리하는 예제
• 다중 상태 저장소를 구현하여 다양한 기능을 담는 예제 (예: 사용자 상태 저장소와 상품 상태 저장소 분리)

예제 코드:

// userStore.js
import create from 'zustand';

export const useUserStore = create((set) => ({
  user: null,
  setUser: (newUser) => set({ user: newUser }),
  clearUser: () => set({ user: null }),
}));

// productStore.js
import create from 'zustand';

export const useProductStore = create((set) => ({
  products: [],
  addProduct: (product) => set((state) => ({ products: [...state.products, product] })),
  clearProducts: () => set({ products: [] }),
}));

// App.js
import React from 'react';
import { useUserStore } from './userStore';
import { useProductStore } from './productStore';

function App() {
  const { user, setUser, clearUser } = useUserStore();
  const { products, addProduct, clearProducts } = useProductStore();

  return (
    <div>
      <h1>User Management</h1>
      <p>Current User: {user ? user.name : 'No user'}</p>
      <button onClick={() => setUser({ name: 'John Doe' })}>Set User</button>
      <button onClick={clearUser}>Clear User</button>

      <h1>Product Management</h1>
      <ul>
        {products.map((product, index) => (
          <li key={index}>{product}</li>
        ))}
      </ul>
      <button onClick={() => addProduct('New Product')}>Add Product</button>
      <button onClick={clearProducts}>Clear Products</button>
    </div>
  );
}

export default App;

설명:

1. useUserStore와 useProductStore는 각각 사용자와 상품 상태를 관리하는 독립적인 상태 저장소입니다.
2. setUser, addProduct와 같은 메서드를 사용해 상태를 업데이트하고, 컴포넌트에서 이 상태를 읽어 렌더링할 수 있습니다.
3. 대형 프로젝트에서는 상태를 각 기능별로 분리하여 관리함으로써 코드의 가독성과 유지보수성을 높일 수 있습니다.

목표:

• 대형 프로젝트에서 모듈화된 상태 관리 전략을 이해하고, 이를 통해 상태 코드를 효율적으로 관리할 수 있게 됩니다.