요즘 대세인 react 전역 상태관리 jotai 와 zustand

요즘 가장 대세처럼 많이 사용한다고 여기저기 사용한 코드를 인수인계 받거나 블로그 글도 많이 보았는데, 그래서 정확히 뭔지 궁금해짐. 둘 다 전역 상태관리 라이브러리 아닌가? 그래서 두 라이브러리가 어떻게 다를까? 

 

Jotai

jotai의 특징들 

- Atomic 한 상태관리 (Recoil 과 유사)

- atom() 을 사용한 개별적인 상태를 정의 할 수 있음

- 이렇게 개별화된 atom을 useAtom() 으로 사용 가능 

- 개별 atom단위로 구독

- atomWithAsync() 등등 으로 비동기 사용

- 상태가 독립적이거나 세분화된 경우에 사용하기 좋음

 

import { atom, useAtom } from 'jotai';

const countAtom = atom(0); // atom() 으로 상태 정의 

function Counter() {
  const [count, setCount] = useAtom(countAtom); // useAtom 으로 사용  

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button> // setCount() 를 통한 개별 업데이트 
    </div>
  );
}

export default Counter;

 

 

Zustand

- Store 기반한 상태관리 (Redux 와 유사)

- create() 를 사용한 상태 정의와 액션 정의

- useStore(), useZustand() 로 상태 업데이트 

- Store의 부분 상태를 구독 가능 

- set() 으로 비동기 로직 사용 가능

- 여러 상태를 한 번에 관리할 수 있음 

import { create } from 'zustand';

const useCounterStore = create((set) => ({ // store 정의 
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })), // set() 으로 상태를 변경 
}));

function Counter() {
  const { count, increase } = useCounterStore(); // 상태 구독

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increase}>+1</button>
    </div>
  );
}

export default Counter;

 

최종 결론

둘 중 하나만 써도 무방하겠지만 각각 필요한 역활에 조합해서 쓰는게 좋아보인다. 

데이터 관리는 zustand로 store에 저장하고, 테마 변경등의 독립적으로 상태를 구성하는 거는 jotai로 관리하는걸 추천한다고 한다. 

 

import { atom, useAtom } from 'jotai';
import { create } from 'zustand';

// Zustand Store 정의
const useUserStore = create((set) => ({
  user: { name: '홍길동', age: 25 },
  setUser: (user) => set({ user }),
}));

// Jotai 상태 정의
const themeAtom = atom('light');

function Profile() {
  const { user, setUser } = useUserStore();
  const [theme, setTheme] = useAtom(themeAtom);

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <h2>{user.name}</h2>
      <button onClick={() => setUser({ name: 'Bob', age: 30 })}>Change Name</button>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme</button>
    </div>
  );
}

export default Profile;

 

라떼는 redux 가 거의 유일무이였는데, 이제 다양한 관리 라이브러리도 나오는 걸 보니 계속 공부해야 겠음