15일차

객체/배열 복사(...Spread연산자)

한 객체를 다른 객체에 할당해주었을 때 기존의 객체 값을 변경할 경우 할당된 다른 객체의 값도 변하게 된다.

할당된 다른 객체의 값이 변경되지 않도록 하려면 어떻게 해야할까?

const profile = {
	name: '철수',
    age: 8,
    school: '다람쥐 초등학교'
    }
 
 const friendProfile = {
 	name: profile.name,
    age: profile.age,
    school: profile.school
 }

이렇게 만들어주면 된다. 하지만 객체의 키가 늘어날 경우 하나하나 키와 값이 늘어날 경우 하나하나 할당해주기 곤란하기 때문에 다른 방법을 사용해야한다.

const friendProfile = {...profile}

spread 연산자^0^ but shallow copy로는 객체 안의 객체는 복사해올 수 없다!
객체 안의 객체를 가져와야하는 경우에는 JSON.stringify(object)를 해준 후 JSON.parse(object)해주면 가능하다 ^0^

무한스크롤

어제는 페이지네이션에 대해 배워보았다. 오늘은 게시글을 불러올 수 있는 다른 방법인 무한 스크롤에 대해서 배웠다.

무한스크롤 기능을 사용하기 위해서 react infinite scroller를 사용한다. 사용방법은 간단하다. 먼저 터미널에서
yarn add react-infinite-scroller
하여 react infinite scroller를 받아주자.

그리고 난 후 아래의 코드를 사용하고자 하는 컴포넌트의 presenter 적용시켜주면 끝!

<InfiniteScroll
    pageStart={0}
    loadMore={loadFunc}
    hasMore={true || false}
    loader={<div className="loader" key={0}>Loading ...</div>}
>
    {items} // <-- This is the content you want to load
</InfiniteScroll>

loadMore 부분에는 우리가 불러올 data를 fetch해주는 함수를 넣어주면된다. 이렇게 끝난다면 간단하겠지만 Container에서 더 설정 해주어야할 것이 있다.

// data, fetchMore 불러오기
  const { data, fetchMore } = useQuery(FETCH_BOARDS);

// loadMore 함수
  const onLoadMore = () => {
    if (!data) return;

    fetchMore({
      // 다음페이지 불러오기
      variables: { page: Math.ceil(data?.fetchBoards.length / 10) + 1 },

      // 현재 불러온 데이터에 다음 데이터 추가해주기
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult?.fetchBoards)
          return {
            fetchBoards: [...prev.fetchBoards],
          };
        return {
          fetchBoards: [...prev.fetchBoards, ...fetchMoreResult.fetchBoards],
        };
      },
    });
  };

이렇게 적용해주고나면 윈도우 스크롤을 기준으로 스크롤 bottom이 최하단일 때 불러올 데이터가 있으면 추가로 데이터를 불러와 현재 데이터의 아래에 붙여넣어 보여준다.

만약 윈도우 스크롤이 아닌 해당 컴포넌트의 스크롤을 기준으로 보여주고 싶다면 아래의 코드를 적용시켜주자.

<div style="height:700px;overflow:auto;">
    <InfiniteScroll
        pageStart={0}
        loadMore={loadFunc}
        hasMore={true || false}
        loader={<div className="loader" key={0}>Loading ...</div>}
        useWindow={false}
    >
        {items}
    </InfiniteScroll>
</div>