Context API

Cache

Cache는 데이터를 임시로 저장해 두는 곳이다.

---

아폴로 캐쉬 스테이트

프로젝트 전체에서 접근 가능한 global state
지금까진 props를 여러단계를 거쳐서 전달,전달,전달... 무한 전달 해줬지만
아폴로 캐쉬 스테이트를 쓰면 프로젝트 전체에서 접근 가능하다.

하지만 아폴로 캐쉬 스테이트에 모든 값이 저장되면
복잡하니까 이를 해결하기 위해 나온게

Context API 이다.

---

Context API

최상단 app_js에서 말단으로 데이터를 넘길때 쓰는데
내가 넘기고 싶은 값만 넣어서 전달 가능하다.

createContext

import { createContext } from "react";

export const GlobalContext = createContext(null);
function MyApp({ Component, pageProps }) {

  const [accessToken, setAccessToken] = useState("");
  const [userInfo, setUserInfo] = useState({});

  const value = {
    accessToken: accessToken,
    setAccessToken: setAccessToken,
    userInfo: userInfo,
    setUserInfo: setUserInfo,
  };
............ 

최상단 파일에서 데이터를 전달하기 위해서 createContext 를 썼다.
그리고 넘기고 싶은 값을 value안에 넣어줬다.

return (
    <GlobalContext.Provider value={value}>
      <ApolloProvider client={client}>
        {!isMain && !isSignIn && (
          <Layout>
            <Component {...pageProps} />
          </Layout>
        )}
        {isMain && <Main />}
        {isSignIn && <SignIn />}
      </ApolloProvider>
    </GlobalContext.Provider>
  );
}

위에서 GlobalContext라는 이름으로 contextAPI를 생성 했기때문에
내가 적용시켜주고 싶은 부분 겉에 <GlobalContext.Provider> 로 감싸줬고
value 값을 전달하기위해서 props로 전달해준 모습이다.

useContext

import { useContext} from "react";

export default function MainPage() {
  const { setAccessToken } = useContext(GlobalContext);

  async function onClickLogin() {
    try {
      const result = await loginUser({
        variables: {
          password,
          email,
        },
      });
      console.log(result.data.loginUser.accessToken);
      localStorage.setItem("accessToken", result.data?.loginUser.accessToken);
      setAccessToken(result.data.loginUser.accessToken);

      router.push("/boards");
    } catch (err: any) {
      alert(err.message);
    }
  }

ContextAPI를 전달 받아서 쓰기위해선 useContext를 import해서 사용해야한다.