react-query

redux, mobx와 비슷하지만 다른 상태관리 라이브러리

차이점

기존 라이브러리 : 요청 -> 참조 혹은 예외처리

react-query : 알아서 캐싱, 리패칭

React-query가 주장하는 global state 개념

• 전역 state를 client와 server 로 구분
• client-state : 세션간 지속적이지 않는 데이터, 동기적, 클라이언트가 소유, 항상 최신 데이터로 업데이트(렌더링에 반영)
  • useState, redux store의 데이터와 같음
• server state : 세션간 지속되는 데이터, 비동기적, 세션을 진행하는 클라이언트만 소유한게 아니라 공유되는 데이터도 존재하며 여러 클라이언트에 의해 수정될 수 있음
  클라이언트에서는 서버데이터의 스냅샷만을 사용하기 때문에 클라이언트에서 보이는 서버데이터는 항상 최신임을 보장할 수 없음
  • 비동기적으로 받아올 수 있는 백엔드 DB에 저장되어 있는 데이터

만들어진 동기

서버데이터는 항상 최신 상태임을 보장하지 않고 명시적으로 fetching을 수행해야만 최신 데이터로 전환 됨
네트워크 통신은 최소한으로 줄이는게 좋은데, 복수의 컴포넌트에서 최신 데이터를 받아오기 위해 fetching을 여러번 수행하는 낭비가 발생할 수 있음

고찰

아폴로 클라이언트랑 비슷한 느낌이다.
리덕스가 출시된지 오래되었고 언젠간 레거시가 될 수도 있겠다는 생각이 들었다.
그렇지만 이미 많은 기업에서 사용하고 있기 때문에 리덕스가 금방 없어질 것 같진 않다.
분명 react-query가 좋은 라이브러리일 순 있지만 지금 당장 회사에서 리덕스를 사용하고 있고 내가 리덕스에 능숙하지 않기 때문에 리덕스를 공부하는게 맞다고 생각한다.
그렇지만 언제든 새로울 기술을 익힐 가능성을 열어 두어야 할 것이다.

참고 문헌

• https://maxkim-j.github.io/posts/react-query-preview