전역 상태관리 라이브러리 (redux, recoil 등)

박영은·2022년 5월 15일
3

0. 전역 상태관리 라이브러리

1. redux 🔸

  • 가장 사용률이 높은 대표적인 react 전역 상태관리 라이브러리
    - 순수 HTML, JAVASCRIPT 내에서도 사용 가능

  • 1앱당 1스토어 (여러개 가능하지만 권장하지 않음)

  • 읽기전용 상태
    - 기존의 state 고유 값은 수정하지 않고 새로운 state 를 만들어 이를 수정하는 방식으로 업데이트

  • 액션이라는 객체를 통해서만 상태를 변경.

  • 순수 함수로 되어있어서 상태 예측 가능. (테스트도 유리함.)

  • 유지보수 용이.

  • 원래 A 컴포넌트가 G 컴포넌트에 접근해 무언가 하려고 한다면 A ▶ B ▶ C ▶ D ▶ E ▶ F ▶ G 순서로 접근 후, 다시 G ▶ F ▶ E ▶ D ▶ C ▶ B ▶ A 루트를 통해 돌아와야함. = 완전 비효율적!!
    Redux로 A ▶ Store ▶ G 식의 효율적인 접근이 가능.

  • 리듀서와 연관되는 개념

🌳 Store(스토어) - Action(액션) - Reducer(리듀서)

🌱 Store

컴포넌트와는 별개로 상태가 관리되는 오직 하나의 공간으로, 스토어 안에 앱에서 필요한 상태를 담고, 컴포넌트에서 상태정보가 필요할 때 스토어에 접근.
액션은 반드시 type 필드(어떤 동작인지를 표기한 지정표)를 가지고 있어야 하며, 그 외의 값은 상황에 따라 넣어줌.
* 어떤 동작에 대해 선언된 객체상태 변화를 시킬 때 발생시킨다고 생각하면 됨.

🌱 Action

주문서앱에서 스토어로 운반할 데이터로, 자바스크립트 객체 형식으로 되어있음.

🌱 Reducer

state 에 변화를 일으키는 함수.
StateAction을 인자로 받아 Store에 접근해 Action에 맞춰 State를 변경

  • hook 전환에 빠르게 대응
  • 본질은 Node.js 모듈임
    - redux-toolkit





2. recoil 🔸

  • 페이스북에서 공식적으로 개발하고 있는 전역 상태관리 라이브러리

  • store선언이 간결. = 훨씬 쉬움.

  • context api의 문제점인 Provider hell을 겪지 않아도 되며 리덕스로 따지면 selector 같은 기능도 제공

  • redux-toolkit이 생기면서 많이 간소화 되긴했지만,
    recoil은 거의 useState쓰는 느낌이라 비교도 안됨.

  • 위와 같은 이유로, 요새 redux에서 넘어오는 추세인 듯

  • 1) 어플리케이션을 RecoilRoot로 감싸고,
    2) 데이터를 atom이라는 단위로 선언하여
    3) useState를 Recoil의 useRecoilState로 대체하여 사용.

🌱 atom

  • 하나의 상태로 컴포넌트가 구독할 수 있는 React state같은 것.
  • atom의 값을 변경하면 그것을 구독하고 있는 컴포넌트들이 모두 다시 렌더링됨.
  • atom을 생성하기 위해 어플리케이션에서 고유한 키 값과 디폴트 값을 설정해야함.
    - 디폴드 값은 정적인 값, 함수 또는 심지어 비동기 함수(나중에 지원 예정) 가능.
  ex) 
		  export const nameState = atom({
 		 	key: 'nameState',
 		 	default: 'Youngeun Park'
		  });

🌱 useRecoilState

  • atom값을 구독하여 업데이트할 수 있는 hook.
  • useState와 동일한 방식으로 사용

🌱 useRecoilValue

  • setter 함수 없이 atom의 값을 반환만 함.

🌱 useSetRecoilState

  • setter 함수만 반환

🌱 selector

  • 상태에서 파생된 데이터
  • 다른 atom에 의존하는 동적인 데이터를 만들 수 있게 해줌.
  • Reduxreselect처럼 동작하는 get 함수를 가지고 있음.
  • 하나 이상의 atom을 업데이트 할 수 있는 "set" 함수를 옵션으로 받을 수 있음.
  • atom로부터 계산된 값을 얻을 수 있고, 또한 복수의 atom에게 영향을 줄 수도 있음.





3. mobx

  • React에 종속적인 라이브러리가 아님
  • redux와 다르게 store에 제한이 없음
  • redux보다 쉬움
  • Typescript 기반





4. jotai

  • recoil과 사용법, 컨셉이 유사함.
  • react-spring을 개발한 팀에서 만든 오픈소스 라이브러리
  • key를 선언하는 recoil보다는 객체의 아이덴티티에 의존하기 때문에 간단한 데이터를 다루는 정도일때 사용하는 것이 좋다고함.
  • 용량이 가벼움(recoil대비 10배정도 가벼움)
  • 단점: react-refresh 대응 문제있음. (state날아감)




참고
리덕스 참고1
리덕스 참고2
리코일 참고1

profile
Front-end

0개의 댓글