🧐 React-query , Recoil
리액트 본연의 상태관리
→ 공통된 상위요소에서 데이터를 공유하는 것 [ X 거대한 트리가 다시 렌더링되는 .. ]
→ context 사용 [ X 자체 소비자( consumer )를 가지는 여러값의 집합을 담을 수 없다. ]
⇒ 코드 분할을 어렵게 한다
recoil ← useState 대체 react-query ← redux 대체
⛓️💥 Recoil
atoms → selectors → component
- 상태 정의는 점진적이고(incremental) 분산되어 있기 때문에, 코드 분할이 가능하다.
selector atom 이나 다른 selector 를 입력으로 받아들이는 순수함수
// state.ts
export const fontSizeState = atom({
key: 'fontSizeState',
default: 14,
});
export const fontSizeLabelState = selector({
key: 'fontSizeLabelState',
get: ({ get }) => {
const fontSize = get(fontSizeState);
const unit = 'px';
return `${fontSize}${unit}`;
}
})⛓️💥 React-query
! 데이터 캐싱
데이터를 fetching → caching 하는데 데이터의 상태가 stale 한 상태 ( : 신선하지 않은 , =일정시간이 지난 상태 ) 가 되면 refetching 한다
mutation
: 서버에 Side-Effect 를 일으키도록 하는 함수다. 인계 받은 쿼리 값을 기반으로 새로운 결과를 도출하여 서버에 변경 사항을 적용하도록 요청하는 기능을 한다.
→ 변경사항을 쿼리에 바로 적용할 수 있도록
Recoil + React-query 로 비동기 통신 분리
recoil 의 selector 를 활용해서 서버와 분리된 클라이언트 단에서의 전역 변수 관리를 진행하고
react-query hook을 통해 서버 데이터를 페칭해와서 업데이트 하는 방식으로
프로젝트의 전역 상태 관리를 진행할 것 같다 아마도?
hello, world