Global State
global state의 등장 배경
props-drilling을 해결하기 위함.
툴에는 context-api, Redux, Recoil 등이 있다.
props-drilling
부모 컴포넌트에서state를props로 자식 컴포넌트로, 그 안의 자식 컴포넌트로 계속 전달해주는 것. 어디서부터 시작된건지 알기 어렵다.
Global state에는 클라이언트 데이터, 서버 데이터가 있다.
- 클라이언트 데이터 : 프론트엔드 개발자가 만든
state들 - 서버 데이터 : 백엔드에 요청해서 받아온 데이터
서버 데이터를 요청할 때엔 글로벌 스테이트에 있나 동일한 데이터가 있나 확인해서
- 있다면 백엔드 요청 없이 바로 가져오고(서버 데이터 캐싱),
- 없다면 그 때 백엔드에 요청해서 가져오게 된다.
위의 과정을 Apollo-client의 페치 정책(fetch policy)이라고 한다.
기존의 redux, mobx, swr 등은 이 서버 데이터 캐싱하는 과정을 개발자가 직접 했어야했다.
➡️ 이 과정을 알아서 해주는 reactQuery, apolloClient가 등장 !
Recoil 등장 배경
서버 데이터를 전역적으로 관리하고 캐싱해주는 도구는 나왔지만 여기에 클라이언트 데이터를 강제로 추가해서 사용하지는 않고, 그렇다고 클라이언트 데이터를 글로벌 스테이트로 쓰기 위해서 Redux, mobx 등을 쓰기엔 과하다.
➡️ Recoil 등장 !
최근에는 reactQuery + Recoil, 또는 apolloClient + Recoil 정도로 쓰는 추세!
이용자가 줄어들던 Redux가 쇄신을 해서 redux-toolKit(클라이언트데이터) + RTK-Query(서버데이터)를 출시했다. RTK-Query는 @reduxjs/toolkit 안에 포함되어있다.
서버데이터 관리 툴에서는 리덕스가 아폴로에 거의 근접해있다.
클라이언트 데이터 관리 툴은 리덕스가 서버+클라이언트 데이터 관리 툴을 한 패키지 안에 담아둬서 다운로드 수로는 비교가 어려운 것 같다.
Apollo Client의 패치정책
- cache-first(기본값)
- network-only(무조건 백엔드에 먼저 요청)
- cache-only
- cache-and-network
- ...etc
🔗 Apollo GraphQL
https://www.apollographql.com/docs/react/data/queries/
아폴로 클라이언트 설정에서 cache: new InMemoryCache()로 해두면 페이지 이동 시마다 저장되어있던 서버 데이터가 모두 초기화된다. 같은 페이지 내에서 다른 컴포넌트를 불러온 후 이전에 요청했던 데이터를 불러오면 새롭게 요청을 보내지는 않는다. 이전에 받아온 서버 데이터를 캐싱해서 저장해뒀기 때문이다. 페이지를 이동해도 서버 데이터를 초기화하고 싶지 않다면 아폴로 클라이언트 캐시 설정 시 함수 외부에서 캐시를 전역변수로 선언한 후 그 전역변수를 사용해야한다.
크롬 브라우저에서 apollo DevTool 확장프로그램을 설치해 해당 페이지에서 받아오는 서버 데이터 캐시를 확인할 수 있다.(캐시를 전역변수로 사용해야함) 데브툴에서는 id, _id 등의 이름만 아이디로 인식을 해서 캐시를 분리해 저장한다. 캐시를 보려면 데이터를 받아올 때 id 값을 넣어서 받아야한다.
