[TIL] Day15

1. 댓글 수정하기

2. 무한 스크롤

라이브러리 : react infinite scroller or react-infinite-scroll-component

export default function MapBoardPage() {
  const { data, fetchMore } = useQuery(FETCH_BOARDS);

  const loadFunc = () => {
    if (!data) return;

    fetchMore({
      variables: { page: Math.ceil(data.fetchBoards.length / 10) + 1 },
      // 다음페이지를 보내야하기 때문에 현재 페이지 + 1
      updateQuery: (prev, { fetchMoreResult }) => {
      // (기존의 것, 더 불러올 것)
        if (!fetchMoreResult.fetchBoards) // 데이터가 없으면 이전 댓글 불러온 것만 보여주기
          return {
            fetchBoards: [...prev.fetchBoards],
          };
        return {
          fetchBoards: [...prev.fetchBoards, ...fetchMoreResult.fetchBoards],
        }; // 전체 댓글 : 이전 댓글 + 추가 댓글 
      },
    });
  };

  return ( 
  // 라이브러리 활용 loadMore에 해당하는 함수를 만든다 위에
    <InfiniteScroll pageStart={0} loadMore={loadFunc} hasMore={true}>
      {data?.fetchBoards.map((el: any) => (
        <MyRow key={el._id}>
          <MyColumn>{el.writer}</MyColumn>
          <MyColumn>{el.title}</MyColumn>
        </MyRow>
      ))}
    </InfiniteScroll>
  );
}

무한스크롤 vs 페이지네이션

무한스크롤의 장점
1. 사용자 참여 및 콘텐츠 탐색이 쉬움
2. 클릭보다 스크롤 할 때 경험이 더 나을 수 있음
3. 모바일 환경에 적합

무한스크롤의 단점
1. 페이지 성능이 느려짐
2. 특정 항목을 검색하거나 원래 위치로 되돌아오기 힘들다
3. 스크롤 막대가 실제 데이터의 양을 반영하지 못한다

페이지네이션의 장점
1. 사용자의 의도에 맞게 페이지 변경
2. 특정 항목의 위치를 파악
3. 사용자가 통제감을 느낌

페이지네이션의 단점
1. 추가 작업 필요
2. 한 페이지에 매우 제한적인 내용

서비스 기획에 맞게 적절한 인터페이스를 사용하자

오늘 공부를 돌아보며

다시 기운내고 마음잡기
귀여운 것들로 기분전환하기. 주변에 나눠주고 다녔더니 기분이 좋아졌다.
이번주 과제인 댓글 수정도 처음에는 좀 헤맸는데, 가이드 보면서 생각정리하고 천천히 해봤더니 거의 완성했다~ 만세!