[React] global State

글로벌 스테이트?

여러컴포넌트에서 사용되는 state

하나의 state가 여러 페이지에서 필요한 경우, 매번 props로 내려주는 것이 아닌 글로벌 스테이트를 사용하게 된다.
props없이 여러 컴포넌트로 보내서 사용할 수 있다.

fetchPolicy

백엔드에 API요청을 하기 전에 글로벌 스테이트를 먼저 검증하는 것

fetchPolicy의 기능

• cache-first : 기본값, 캐시에 있는지 먼저 확인

글로벌스테이트 라이브러리

• React-Query : fetchPolicy가 내장된 REST-API용
• Apollo-Client : fetchPolicy가 내장된 Graphql-API용
• Redux : Redux-toolkit
• Recoil : mini Redux,
  보통 React-Query + Recoil, Apollo-Client + Recoil이렇게 함께 사용한다.

---

Recoil

프로젝트에서 자체적으로 생성되는 데이터를 넣어두기 위해 사용하는 라이브러리

Recoil 설치 및 셋팅

설치 : yarn add recoil

셋팅 : app.tsx파일에서 진행

//ApolloSetting.tsx 파일 
import {
  ApolloClient,
  ApolloLink,
  ApolloProvider,
  InMemoryCache,
} from "@apollo/client";
import { createUploadLink } from "apollo-upload-client";

interface IApolloSettingProps {
  children: JSX.Element;
}

const GLOBAL_STATE = new InMemoryCache();
export default function ApolloSetting(props: IApolloSettingProps) {
  const uploadLink = createUploadLink({
    uri: "http://backend10.codebootcamp.co.kr/graphql",
  });

  const client = new ApolloClient({
    link: ApolloLink.from([uploadLink]),
    cache: GLOBAL_STATE, // 컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 모두 임시로 저장해놓기
  });

  // prettier-ignore
  return (
    <>
      <div>안녕하세요 영희입니다</div>
      <ApolloProvider client={client}>
        {props.children}
        </ApolloProvider>
      <div>안녕하세요 훈이입니다</div>
    </>
  );
}

page를 이동하게 되면 app.tsx가 다시 실행되게 된다.
ApolloClient의 cache가 계속 초기화 되므로 페이지를 이동했을 때 기존에 저장된 글로벌 스테이트가 보이지 않게 되는것 => ApolloSetting.tsx쪽에 설정을 작성해주어야함.
따라서