Next.js 시스템에서 상태 관리 패턴

• 가장 먼저 useState랑 useEffect 짝으로 관리.
  • 만약 관련된 코드가 커지거나 재사용이 필요하다면 둘을 묶어서 훅으로 만들 수 있음.
• 데이터를 여러 컴포넌트에서 사용하게 되면 Context API를 도입하면 됨.
  • 이 때 Context API의 Provider 컴포넌트를 따로 정의해서 state랑 fetch 코드를 집어 넣으면 구조가 심플함.
• 데이터를 SSR해야 한다면 Next.js의 getServerSideProps에서 fetch 해야 함.
  • Provider의 prop으로 초기 값을 전달 받고, 이후 새로고침하는 로직을 Context API로 노출해야할 수도 있음
• 페이지를 이동하더라도 fetch를 반복하지 않으려면, state가 _app 수준에 있어야 함.
  • Context API의 Provider를 _app에서 마운트
  • _app의 getInitialProps에서 데이터를 fetching할 수 있음.
    • 근데 이러면 데이터를 안 쓰는 페이지에서도 요청하게 됨.
    • static 페이지를 빌드할 수 없어 Next.js의 장점을 깎아 먹음.
  • _app의 prop 중에 각 페이지의 초기 props를 담는 pageProps가 있다. 여기서 원하는 데이터를 뽑아서 Provider에 넣어주면 좋다.

Apollo Client를 Next.js와 연동하면서 마지막 방법을 알게 되어 총 정리해 봄.