zustand

https://github.com/pmndrs/zustand

https://ui.toast.com/posts/ko_20210812 참고

Zustand는 독일어로 '상태'라는 뜻을 가진 라이브러리이며 Jotai를 만든 카토 다이시가 제작에 참여하고 적극적으로 관리하는 라이브러리이다. 아래의 특징을 가지고 있다.

• 특정 라이브러리에 엮이지 않는다. (그래도 React와 함께 쓸 수 있는 API는 기본적으로 제공한다.)
• 한 개의 중앙에 집중된 형식의 스토어 구조를 활용하면서, 상태를 정의하고 사용하는 방법이 단순하다.
• Context API를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.
• React에 직접적으로 의존하지 않기 때문에 자주 바뀌는 상태를 직접 제어할 수 있는 방법도 제공한다.
• 동작을 이해하기 위해 알아야 하는 코드 양이 아주 적다. 핵심 로직의 코드 줄 수가 약 42줄밖에 되지 않는다. (VanillaJS 기준)

react-redux

Why Use React Redux? | React Redux

https://hanamon.kr/redux란-리덕스-상태-관리-라이브러리/ 참고

비동기 처리 하기 위해서 redux-saga도 봐야함.

https://velog.io/@dongwon2/Redux-Thunk-vs-Redux-Saga를-비교해-봅시다- 참고

Redux의 장점

• 상태를 예측 가능하게 만든다. (순수함수를 사용하기 때문)
• 유지보수 (복잡한 상태 관리와 비교)
• 디버깅에 유리 (action과 state log 기록 시) → redux dev tool (크롬 확장)
• 테스트를 붙이기 용의 (순수함수를 사용하기 때문)

Recoil

https://github.com/facebookexperimental/Recoil

https://velog.io/@nemo/recoil 참고

Recoil 장점

• Recoil은 전역 상태 관리를 컴포넌트 내부의 상태 관리처럼 간단한 get/set 인터페이스로 사용할 수 있도록 boilerplate-free API를 제공한다.
• Concurrent Mode를 비롯한 다양한 React 기능들과 호환이 가능하다.
• 상태 정의에 대한 코드 분할이 가능하다.
• 전역 상태를 사용하고 있는 컴포넌트는 수정 없이 변경된 상태로 교체할 수 있다.
• 컴포넌트 수정 없이 동기식/비동기식 전환이 가능하다.
• 전역 상태의 경우 애플리케이션이 변경되더라도 그대로 유지된다.

jotai

https://github.com/pmndrs/jotai

https://seungahhong.github.io/blog/2022/06/2022-06-14-jotai/ 참고

Jotai 특장점

• 기본적으로 re-rendering 문제를 줄여주고, selectAtom, splitAtom 과 같은 re-rendering 을 줄이기 위한 유틸들도 지원한다.
• 보일러 플레이트 코드가 redux에 비하면 현저하게 줄어든다.
• React 의 주요 feature일 Suspense(Concurrent mode)를 적용하는데에 적합하게 설계
• Jotai 가 강조하는 두가지 특징
  • Primitive: 리액트 기본 state 함수인 useState 와 유사한 인터페이스
  • Flexible: atom들끼리 서로 결합 및 상태에 관여할 수 있고, 다른 라이브러리들과 원할한 결합을 지원(특히, redux와 상태관리 연동 가능)

react-query - 다른 상태관리 라이브러리와 같이 사용해도 될듯

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query

https://tech.kakaopay.com/post/react-query-1/#react-query-소개 참고

React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화 하고 업데이트 하는 작업을 도와주는 라이브러리

react-query 기본 개념

https://velog.io/@jay/10-minute-react-query-concept

https://kyounghwan01.github.io/blog/React/react-query/basic/#사용하는-이유

react-query 사용 방법

https://freestrokes.tistory.com/170