global state

글로벌 스테이트(global state)

글로벌 스테이트란, 여러컴포넌트에 사용되는 state다

전역상태관리(global state) 툴로는 context-Api, Redux, Recoil등이 있다

 

fetchPolicy

recoil과 context-api를 보기전에 , apollo-client의 고급 기능을 먼저 보자

apollo-client로 global state를 만들게되면 Apollo-Cache 라는곳에 저장된다

 

만일 2번 컴포넌트에서 useQuery를 해오게 되면 useQuery를 해서 받아온 데이터가 Apollo-Cache에 저장된 후 컴포넌트로 들어온다

이후에 3번 컴포넌트에서 같은 데이터를 요청하게 되면, Apollo-Cache 에 먼저가서 데이터가 있는지 확인하고 없으면 백엔드에 요청을 있으면 백엔드에 요청을 하지 않고 컴포넌트로 바로 보내준다

 

이를 Apollo-client의 fetchPolicy(fetch 정책)라고 한다

fetchPolicy에는 여러가지 기능들이 있으며, 변경이 가능하다

 

fetchPolicy의 기능

• “cache-first” default → 캐시에 있는지 먼저 확인
• “network-only” → 캐시에 있든 없든 무조건 백엔드에 요청

---

1. 새로운 컴포넌트 등장시에도 글로벌 스테이트 값은 유지된다
2. 새로운 페이지 이동에는 글로벌 스테이트 값이 유지되지 않는다

export default function StaticRoutingMovedPage(): JSX.Element {
  const [isOpen, setIsOpen] = useState(false)
  const router = useRouter()

  const { data } = useQuery<Pick<IQuery, "fetchBoards">, IQueryFetchBoardsArgs>(
    FETCH_BOARDS
  )

  // 1. 새로운 컴포넌트 등장시에도 글로벌 스테이트 값이 유지되는지?
  const onClickIsOpen = (): void => {
    setIsOpen(true)
  }

  // 2. 새로운 페이지 이동에도 글로벌 스테이트 값이 유지되는지?
  const onClickMove = (): void => {
    void router.push("/section22/22-01-fetch-policy-moved")
  }

  return (
    <div>
      <button onClick={onClickIsOpen}>
        1. 버튼 클릭 시 새로운 컴포넌트 나타남
      </button>
      {isOpen && <FetchPolicyExample />}
      ==================================
      <button onClick={onClickMove}>2. 버튼 클릭 시 페이지 이동</button>
    </div>
  )
}

 

매 페이지마다 가장 먼저 실행되는 _app.tsx에서

글로벌 캐시는 InMemoryCache() 부분
아폴로캐시스테이트, 아폴로캐시 이런 식으로 들어옴

  const client = new ApolloClient({
    link: ApolloLink.from([uploadLink]),
    cache: new InMemoryCache(), // 컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장 => 나중에 더 자세히
  })

---

페이지를 이동하면 앱 컴포넌트가 새롭게 실행되면서 기존 것이 삭제돼서 새로운 걸 받아오게 됨
=> 페이지마다 new가 안되게 막아주기

const GLOBAL_STATE = new InMemoryCache();

 

컴포넌트 밖에다 이렇게 작성하면 리렌더링 안됨