가장 사용률이 높은 대표적인 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
에 변화를 일으키는 함수.
State
와 Action
을 인자로 받아 Store
에 접근해 Action
에 맞춰 State
를 변경
페이스북에서 공식적으로 개발하고 있는 전역 상태관리 라이브러리
store
선언이 간결. = 훨씬 쉬움.
context api의 문제점인 Provider hell
을 겪지 않아도 되며 리덕스로 따지면 selector
같은 기능도 제공
redux-toolkit
이 생기면서 많이 간소화 되긴했지만,
recoil은 거의 useState
쓰는 느낌이라 비교도 안됨.
위와 같은 이유로, 요새 redux에서 넘어오는 추세인 듯
1) 어플리케이션을 RecoilRoot
로 감싸고,
2) 데이터를 atom
이라는 단위로 선언하여
3) useState
를 Recoil의 useRecoilState
로 대체하여 사용.
하나의 상태
로 컴포넌트가 구독할 수 있는 React state
같은 것. ex)
export const nameState = atom({
key: 'nameState',
default: 'Youngeun Park'
});
atom
의 값을 구독하여 업데이트할 수 있는 hook. useState
와 동일한 방식으로 사용setter
함수 없이 atom의 값을 반환
만 함.Redux
의 reselect
처럼 동작하는 get
함수를 가지고 있음. recoil
과 사용법, 컨셉이 유사함.react-spring
을 개발한 팀에서 만든 오픈소스 라이브러리recoil
대비 10배정도 가벼움)react-refresh
대응 문제있음. (state
날아감)