Zustand
- zustand는 이 단방향 상태흐름 규칙을 깨지 않고 상태를 편하게 관리하기 위해 등장한 flux 패턴을 다루는 상태관리 라이브러리입니다.
Zustand의 장점
- 가볍다
- Zustand는 매우 가벼운 라이브러리로, 번들 크기에 미치는 영향이 작습니다.
- 간결하다
- Zustand는 API가 매우 간결하며, 복잡한 설정이나 보일러플레이트 코드 없이 상태 관리를 시작할 수 있습니다. 이는 코드의 가독성을 향상시키고 학습 곡선을 줄여줍니다.
- 효율적이다
- Zustand는 필요한 컴포넌트만 리렌더링하도록 최적화되어 있습니다. 이는 불필요한 리렌더링을 줄이고 애플리케이션의 성능을 향상시킵니다.
상태관리 라이브러리를 쓰는 이유
- 다른 페이지나 컴포넌트와 상태를 공유하기 위해서입니다.
- 리액트에서 상태는 단방향으로 흐르기 때문에 다른 컴포넌트나 페이지와 상태를 공유하기 위해서는 상태를 상위 컴포넌트로 끌어올리고 하위 컴포넌트로 내려주는 방식으로 사용해야 하는데 이렇게 되면 props drilling 현상이 발생합니다. 그러면 유지보수하기 힘들어지기 때문에 상태관리 라이브러리를 사용합니다.
Flux 패턴
-
flux 패턴은 데이터를 중앙 집중형 스토어에 저장하고 Action을 통해 데이터를 조작하는 패턴입니다.
-
Flux는 일관된 방식으로 애플리케이션의 상태를 관리하고 업데이트하는데 도움을 줍니다.
-
Flux 패턴의 핵심은 "단방향 데이터 흐름"입니다. 이는 데이터가 애플리케이션을 통해 한 방향으로만 흐르게 하여 상태 변경을 예측 가능하게 만듭니다. 이는 복잡한 애플리케이션에서 상태 관리를 더욱 간단하고 효과적으로 만들어줍니다.
-
Flux 아키텍처는 크게 4가지 주요 구성 요소로 이루어져 있다.
- Action: 사용자 상호작용이나 서버 응답 등 애플리케이션에서 발생하는 다양한 이벤트를 나타내는 객체입니다.
- Dispatcher: 모든 액션을 받아 등록된 콜백 함수를 실행하는 역할을 합니다. 이는 액션을 통해 상태를 업데이트하는 중앙 허브 역할을 합니다.
- Store: 애플리케이션의 상태와 상태를 변경하는 로직을 포함한다. Store는 Dispatcher에서 액션을 받아 상태를 업데이트하고, 상태가 변경되었음을 알리기 위해 이벤트를 방출합니다.
- View: 사용자 인터페이스를 나타내며, Store에서 상태를 가져와 렌더링합니다. 상태가 변경되면 View는 새로운 상태를 가져와 다시 렌더링합니다.
Zustand가 여러 개의 스토어를 사용할 수 있지만 왜 슬라이스와 같은 개념을 사용하여 하나의 스토어로 combine 할까
-
성능 및 메모리 관리: 여러 개의 작은 스토어를 사용하는 것보다 하나의 큰 스토어를 사용하는 경우 메모리 사용량 및 전체적인 성능에 이점이 있을 수 있습니다. 또한, 하나의 스토어에서 상태를 변경할 때마다 리렌더링이 발생하므로 상태 간의 의존성이 있는 경우에는 하나의 스토어에서 더 쉽게 처리할 수 있습니다.
-
일관성과 유지보수: 하나의 스토어를 사용하면 애플리케이션의 전반적인 상태를 한곳에서 쉽게 관리할 수 있습니다. 이는 코드의 일관성을 유지하고 유지보수를 쉽게 만들어줍니다. 스토어가 분리되어 있다면, 각각의 스토어에서 상태를 변경하고 관리해야 하기 때문에 코드가 복잡해질 수 있습니다.
-
중앙 집중화된 로직 및 미들웨어 적용: 리덕스는 미들웨어를 통한 중앙 집중화된 로직 적용이 쉽습니다. 하나의 스토어에서 액션을 디스패치하고 미들웨어에서 처리할 수 있습니다. Zustand도 비슷한 패턴을 사용할 수 있지만, 하나의 스토어로 중앙 집중화된 로직을 적용하는 것이 효과적일 수 있습니다.
그러나 상황에 따라 여러 개의 스토어를 사용하는 것이 나을 수도 있습니다. 예를 들어, 서로 독립적인 모듈 또는 컴포넌트가 각각의 스토어를 가지고 있고, 이들 간에 강한 의존성이 없다면 여러 개의 스토어를 사용하여 컴포넌트를 분리하고 유지보수성을 높일 수 있습니다. 따라서 사용하고자 하는 상황 및 애플리케이션의 구조에 따라서 선택하는 것이 중요합니다.
