컴포넌트로 분리하여 여러 곳에서 사용가능하게 만들어준다.
-> boardList.container에서 refetch를 props로 넘겨준다.
객체의 얕은복사
const profile1 = {
name: "철수",
age: 8,
school: "다람쥐초등학교"
}
const profile2 = {...profile1} // 스프레드 연산자를 사용하여 얕은 복사를 할 수 있다.
배열의 얕은 복사
const aaa = ["철수", "영희", "훈이"]
const bbb = [...aaa]
react-infinite-scoller 라이브러리 다운
yarn add react-infinite-scroller
타입스크립트용 다운
yarn add --dev @types/react-infinite-scroller
사용시 import InfiniteScroll from "react-infinite-scroller"; 해준다.
무한스크롤을 적용하고 싶은 영역을 InfiniteScroll
태그안에 작성해준다.
스크롤이 해당 영역의 하단 끝에 닿았을 때 실행되어야 할 기능을 함수로 만들어 loadMore
요소에 지정해 준다.
Apollo-Client의 useQuery에서 제공하는 fetchMore
함수를 사용하면 다음 page에 해당하는 데이터를 불러와 기존 데이터 뒤에 이어지도록 붙여 줄 수 있다.
-> InMemoryCache 업데이트 (이전페이지 10개 + 새로운페이지 10개)
데이터가 없으면 빈화면을 보여주도록 조건부 랜더링을 걸어준다.
globalState
모든 component에서 공유하여 사용할 수 있는 state를 의미한다.
(redux, apollo-client, react-query, mobx, recoil 등등...)
apollosetting안에 있는 InMemoeryCache는 globalState이다.