zustand는 React 상태 관리를 위한 경량 상태 관리 라이브러리입니다. zustand를 사용하여 애플리케이션의 상태를 관리하고, localStorage에 상태를 지속(persist)하도록 설정하고 있습니다.

zustand를 그냥 사용했을 때 문제점

zustand를 각각의 slice로 관리하다보면 다음의 단점이 있습니다.

1. 각각의 store에서 상태를 가져와야하기 때문에 import와 const 선언문이 길어집니다.
2. 각각의 store에 속해있는 상태값을 서로 참고하거나 가져올 수 없습니다.

저희의 zustand 구조는 v4를 기반으로 두고 있습니다. 최근(24년 10월 14일) v5가 나왔지만, 아직 익숙하지 않아서 적용 시키지는 못했습니다. 좋은 블로그글이 있어 공유합니다 (블로그)

use_store 훅을 통한 중앙 집중식 관리

백화점을 떠올리면 좋을 것 같습니다. 각각의 store를 use_store에 입점시켜 서로를 참조하고, 함께 가져올 수 있도록 합니다. 또, 휘발 될 수 있는 상태값을 localStorage에 저장하여 재사용성을 높였습니다

현재 패턴은 슬라이스(Slice) 패턴을 사용하고 있습니다. Zustand의 슬라이스(slice) 패턴은 상태(store)를 모듈화하여 관리하는 방식입니다. 애플리케이션의 상태를 논리적으로 분리함으로써 유지보수성과 확장성을 높일 수 있습니다.

1. 슬라이스 패턴이 필요한 이유

Zustand를 사용할 때 상태가 커지면 하나의 큰 create 스토어에 모든 상태를 관리하는 것이 비효율적입니다. 이를 해결하기 위해 슬라이스 패턴을 사용하면 특정 기능(예: 유저 상태, 테마 상태 등)별로 분리하여 관리할 수 있습니다.

✅ 장점

• 코드 가독성 증가: 상태를 논리적으로 분리하여 쉽게 이해할 수 있음
• 유지보수성 향상: 특정 기능을 수정할 때 다른 상태에 영향을 주지 않음
• 모듈화 가능: 상태를 독립적으로 정의하여 재사용 가능

2. 슬라이스(Slice) 분리하기