Zustand

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는 새로운 상태를 가져와 다시 렌더링한다.