240613 TIL

Zustand 라이브러리: 강력한 React 상태 관리 도구

Zustand은 React 애플리케이션에서 상태 관리를 위한 현대적인 솔루션으로, Redux와 비교할 때 더 간단하고 직관적인 API를 제공합니다. 이 라이브러리는 Context API와 useReducer를 기반으로 하며, Immer와 함께 사용하여 불변성을 유지하면서도 상태를 간편하게 업데이트할 수 있는 장점을 가지고 있습니다.

주요 특징

1. 간편한 사용법: Zustand을 사용하면 전역 상태를 관리하는 데 필요한 복잡한 설정 없이도 단순한 JavaScript 객체와 함수들을 통해 상태를 정의하고 업데이트할 수 있습니다. 예를 들어,

   import create from 'zustand';
   
   const useStore = create((set) => ({
     count: 0,
     increment: () => set((state) => ({ count: state.count + 1 })),
     decrement: () => set((state) => ({ count: state.count - 1 })),
   }));
   
   function CounterComponent() {
     const { count, increment, decrement } = useStore();
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={increment}>Increment</button>
         <button onClick={decrement}>Decrement</button>
       </div>
     );
   }

2. Immer 지원: Zustand은 Immer를 통해 상태 업데이트 시 불변성을 유지하면서도 코드를 간결하게 작성할 수 있는 장점을 제공합니다. 이를 통해 복잡한 상태 변화 로직을 간소화할 수 있습니다.

3. 최적화된 리렌더링: React의 Context API와 함께 사용되어, 필요한 경우에만 컴포넌트가 리렌더링되도록 설계되어 있어 성능을 향상시킬 수 있습니다. Zustand은 내부적으로 React의 최신 기능을 활용하여 최적화된 상태 관리를 제공합니다.

예시와 함께 설명

예를 들어, Zustand을 사용하여 간단한 테마 변경 기능을 구현할 수 있습니다. 다음은 테마 상태를 관리하고 테마를 변경하는 예시 코드입니다:

import create from 'zustand';

const useThemeStore = create((set) => ({
  theme: 'light',
  setTheme: (theme) => set({ theme }),
}));

function ThemeSwitcherComponent() {
  const { theme, setTheme } = useThemeStore();

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
  };

  return (
    <div>
      <p>Current Theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

위 예시에서는 Zustand을 사용하여 간단히 테마를 변경할 수 있는 상태 관리를 구현하였습니다. 이처럼 Zustand은 React 애플리케이션에서 강력한 상태 관리 도구로 사용될 수 있습니다.