- 검색어 결과 페이지 보여주기
-> 페이지네이션에서 boards count를 가져와서 count로 넘겨준다.
- 페이지네이션, 검색창, 이미지 업로드 폴더 나누어주기
- count에는 page가 없으므로 유의해준다.
Under-Fetching / Over-Fetching
함수형 컴포넌트는 원래 함수이다.
prev도 매개변수이기 때문에 이름 변경이 가능하다.
rest-API와 graphql-API 차이
Graphql
- 원하는 데이터만 골라서 받을 수 있다.
- 묶어서 한방에 요청 가능하다.
- graphql의 변수도 이름 변경 가능하다.
graphql은 묶음 API 요청이 가능하다. 즉, 한번에 여러 데이터 요청이 가능하다.
graphql-API 요청시 변수 타입을 선언해주는 이유는 여러 api를 요청할때 구분해주기 위한 것이다.
Rest-API의 문제점
- Under-Fetching (언더페칭) : 묶음 데이터가 필요하지만 데이터를 한 번 밖에 못받아온다.
- Over-Fetching (오버페칭) : return 데이터를 선택할 수 없고 모두 받아와야 한다.
=> graphql로 해결!
Graphql의 실체
graphql은 원래 Rest-API를 변형 시킨 것이다.
Rest-API는 게시글 / 상품 등록 등 페이지를 생성할때마다 CRUD 의 POST, GET을 위해 무수히 많은 endpoint를 생성해야 한다.
또한, 리턴한 데이터를 모두 받아와야 하기 때문에 너무 많고, API 요청시 한번에 하나씩 밖에 못받아 온다.
이를 Graphql에서 해결할 수 있다.
Graphql은 endpoint 줄이기, 리턴 데이터 선택해서 받아오기(요청 body가 있음), 언더페칭을 해결한 방법이다.
Graphql은 무조건 POST 방식 (요청을 바디에 담아서 보냄)이다.
즉, Graphql은 endpoint가 하나인 Rest-API의 POST 방식이다.
Graphql 요청시 무조건 200으로 성공이므로 에러 메시지를 따로 살펴봐야 한다.
글로벌 스테이트
글로벌 스테이트는 모든 컴포넌트에서 사용할 수 있는 스테이트
따라서 props로 넘겨줄 필요가 없고, 재사용이 가능하다.
API를 요청하기 전에 글로벌 스테이트에 존재하는지 확인하는 과정이 필요하다. (글로벌 스테이트 검증)
이를 fetchPolicy 라 하며, 기본값은 cache-first 이다.
글로벌 스테이트 종류
Redux / MobX / SWR / React-Query(fetchPolicy가 내장된 Rest-API용) / Apollo-Client(fetchPolicy가 내장된 Graphql용) / Recoil 등
-> 최근 Redux-toolkit (Redux에서 보완한 것) / React-Query / Apollo-Clinet 사용
-
Redux-toolkit을 사용해서 백엔드에서 받아온 데이터 / 직접 만든 데이터를 저장할 수 있다. -
Recoil은 Apollo-Client를 사용하면서 자체 생성 데이터를 저장하기 위해 사용하는 것이다.
router로 페이지를 이동하면 기존에 저장되어 있던 API 데이터가 초기화된다.
-> InMemoryCache를 GLOBAL_STATE로 설정해준다.
Recoil
Recoil 설치
yarn add recoil
app.tsx에 모든 컴포넌트에 RecoilRoot를 적용해준다.
stores에 index.ts 파일을 만들어서
필요한 global state를 만들어 준다.
useState가 아니라 useRecoilState를 사용하면 global state를 사용할 수 있다.
위에서 만들어둔 global state를 useRecoilState에 사용해준다.
자식 컴포넌트에서도 useRecoilSteate로 global state 재사용이 가능하다.
따라서 기존에 props로 넘겨주었던 isEdit를 global state를 사용해서 유지보수가 용이해졌다.
