✨상태 관리

화면에서 사용하는 데이터를 관리하는 것

Flux

• 데이터의 변경을 한 곳에서 하면서 흐름을 정리

Home | Meta Open Source

• 데이터를 변경하고 싶으면 액션을 만들어서 dispatcher에게 전달.
• dispathcher는 액션을 모아 stroe에 넘겨줌.
• store는 들어온 액션을 차례대로 보면서 데이터를 변경함.
• store에서 데이터가 변경되면 컴포넌트들은 다시 렌더링함.

컴포넌트 - 액션 만들기

store - 데이터 변경하기

dispatcher = store로 전달되는 액션을 차례대로 살펴보기

Redux

Redux - A JS library for predictable and maintainable global state management | Redux

데이터 하나를 추가하려고 매번 무의미한 리덕스 코드를 작성하게 됨

리덕스를 통해서 비동기를 처리하려면 코드가 복잡해지고 알아보기 힘듦

클라이언트 상태와 서버상태를 구분함 (데이터의 출처를 기반으로)

프론트 개발자들은 클라이언트 상태 관리에만 집중하고

서버상태는 서버랑 동기화하면 되지 않을까 하는 아이디어를 떠올림👇🏻👇🏻

React Query

TanStack Query

SWR

React Hooks for Data Fetching – SWR

리액트 쿼리 + SWR

리퀘스트를 정해 놓으면 알아서 서버랑 동기화를 하기 때문에 편하게 서버 상태 관리를 할 수 있다.

Recoil

Recoil

Context는 편리하지만 데이터를 추가할 때마다 Context도 하나씩 늘어난다는 문제점이 있다. Context 한 개에 모든 데이터를 모으면 데이터가 변할 때마다 상관없는 컴포넌트들도 함께 재렌더링 된다. 그리고, 데이터의 구조가 컴포넌트 구조와 섞인다.

• 단순한 상태 관리 라이브러리
• 전역적으로 쓸 수 있는 useState
• 공유할 데이터(Atom)를 컴포넌트 구조와 별개로 분리하는 것
  • Atom: 어디서나 갖다 쓸 수 있는 state 같은 것