프론트엔드 상태에 관한 정리 글

gtah2yk·2021년 3월 14일
6

프론트엔드 개발에서 짜증나는건 상태관리 부분이다.
몇 가지 좋은 글이 많아서 요약겸 정리를 하면 좋을 것 같다 생각이 든다.

리액트 상태 관리의 과거, 미래, 현재

상태분류

  • 상태의 분류법을 여기서 처음 봄
  • 상태 분류 : UI 상태, 서버 캐시 상태, 폼 상태, URL 상태, 상태 머신 5가지로 분류함
    • UI 상태 – 애플리케이션의 대화 형 부분을 제어하는데 사용되는 상태입니다 (예 : 다크 모드 토글, 모달).
    • 서버 캐시 상태 – 빠른 액세스를 위해 클라이언트 측에 캐시하는 서버의 상태입니다 (예 : API 호출, 결과 저장, 여러 위치에서 사용).
    • 양식 상태 – 양식의 다양한 상태 (예 :로드, 제출, 비활성화, 유효성 검사, 재시도).
      • 제어
      • 비제어
    • URL 상태 – 브라우저에서 관리하는 상태 (예 : 제품 필터링, 쿼리 매개 변수에 저장, 필터링 된 동일한 제품을보기 위해 페이지 새로 고침)
    • State Machine – 시간 경과에 따른 상태의 명시적인 모델 (예 : 신호등이 녹색 → 노란색 → 빨간색으로 표시되지만 녹색 → 빨간색은 아님).

타임라인

  • 2013 – 소개

  • 2014 – Flux (많은 라이브러리들)

  • 2015 – Redux

  • 2016 – MobX

  • 2018 – Context

  • 2019 – Hooks 도입 (+ React Query, SWR)

  • 2019 – Zustand

  • 2019 – xState

  • 2020 – Jotai, Recoil, Valtio

  • 2021 – useSelectedContext

  • flux 패턴을 redux로 만듬, 관측형에 대한 니즈로 mobx탄생, 한 동안 서버캐싱과 UI 상태를 두 가지 중 하나로 관리

  • context로 props-drlling을 해결하기 위해 나옴

  • hooks의 탄생 이후로 서버캐싱 라이브러리인 react-query, swr이 나옴

  • 전역 상태 캐싱을 편하게 하기 위한 여러 라이브러리들 탄생(jotai, recoil, valtio)

  • context를 좀 더 캐싱하기 쉽게 useSelectedContext 탄생함

현재

  • 요즘엔 많이 고도화되고 분리되었다.
  • Valtio 는 프록시를 사용해서 mutation 스타일의 api를 제공한다.
  • Jotai는 계산된 값과 비동기 액션에 최적화되어 있다.
  • Zustand는 모듈 상태에 집중한 아주 작고 얇은 라이브러리다
  • Recoil는 date-flow 그래프를 사용한 실험적인 라이브러리다.

immer

  • jotai, redux도 immer를 사용하면 결국 프록시를 사용하는거 아닌가 싶음

미래

  • useSelectedContext를 리액트에 도입할 예정
  • 비슷한 라이브러리는 use-context-selector가 있고, 이미 jotai랑 formik3에서 사용 중

개취

  • 서버 캐싱은 react-query, 간단한 상태공유는 jotai가 좋은듯

Jotai vs. Recoil: What are the differences?

상태관리라이브러리 분류법

  • flux => redux, zustand
  • atomic => jotai, recoil
  • proxy => mobx, valtio, overmind
profile
ㅎㅎ

1개의 댓글

comment-user-thumbnail
2022년 1월 14일

마지막 분류 덕분에 파악하기가 편해졌습니다. 좋은 글 감사해요

답글 달기