[TIL] 22.11.18 - 얕은복사(spread연산자), Infinite-Scroll, globalState

포트폴리오 리뷰

페이지네이션

컴포넌트로 분리하여 여러 곳에서 사용가능하게 만들어준다.

-> boardList.container에서 refetch를 props로 넘겨준다.

• fetchboardscount의 useQuery는 boardlist container에 작성한다.
• refetch는 pagination container가 아니라 게시판 / 상품 list의 container에 작성해서 props로 받아와 사용한다.
  -> pagination을 import해서 어디서든 재사용 가능하게 해준다.

storybook

• 컴포넌트 관리 라이브러리
• 스토리북 주소에 접속해서 컴포넌트를 볼 수 있다.

---

얕은복사

객체의 얕은복사

const profile1 = {
	name: "철수",
	age: 8,
	school: "다람쥐초등학교"
} 	
const profile2 = {...profile1}	// 스프레드 연산자를 사용하여 얕은 복사를 할 수 있다.

배열의 얕은 복사

const aaa = ["철수", "영희", "훈이"]
const bbb = [...aaa]

댓글 수정하기

Infinite-Scroll

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이다.