[팀 프로젝트] 방콕스타일 - 더보기 기능 구현

더보기 기능 추가 이유 ✨

사용자 경험 개선

모든 게시물을 한 번에 보여주는 것으로 진행을 했었는데 한 화면에 많은 데이터를 보여주게 되면 사용자가 부담을 느낄 것 같다는 생각을 했습니다. 그래서 `더보기`버튼을 추가해 사용자가 원할 때 더 많은 게시물을 볼 수 있게 하여 가독성을 높였습니다.

 

구현 📖

 

화면에 보여주는 데이터보다 전체 데이터가 더 많으면 `더보기`버튼 활성화 하는 방식으로 구현했습니다.

// 더보기 클릭
  const handleLoadMore = () => {
    const postDisplay = debounceValue
      ? filteredSearchTermData(LIMIT_NUMBER, filteredPosts, displayedPosts)
      : filteredDisplayedPostsData(LIMIT_NUMBER, allPosts, displayedPosts);

    setDisplayedPosts(postDisplay);
  };

  // 더보기 버튼 활성화 여부
  const showLoadMore = debounceValue
    ? displayedPosts.length < filteredPosts.length
    : displayedPosts.length < allPosts.length;

  const postCard = displayedPosts.map((post) => <PostCard key={post.id} post={post} userInfo={userInfo} />);
  const showPosts = displayedPosts.length ? (
    <>
      <Article>{postCard}</Article>
      {showLoadMore && <Button onClick={handleLoadMore}>더보기</Button>}
    </>
  ) : (
    <h3>게시글이 없습니다.</h3>
  );

 

더보기 클릭 이벤트

// 더보기 클릭
const handleLoadMore = () => {
  const postDisplay = debounceValue
    ? filteredSearchTermData(LIMIT_NUMBER, filteredPosts, displayedPosts)
    : filteredDisplayedPostsData(LIMIT_NUMBER, allPosts, displayedPosts);

  setDisplayedPosts(postDisplay);
};

 

`현재 검색어가 있는 경우`: filteredSearchTermData메서드를 실행시켜 필터링된 검색 결과에서 추가 데이터를 로드하도록 구현했습니다.

`현재 검색어가 없는 경우` filteredDisplayedPostData메서드를 실행시켜 전체 데이터에서 추가로 데이터를 로드하게 구현했습니다.

 

더보기 버튼 활성화 여부

// 더보기 버튼 활성화 여부
const showLoadMore = debounceValue
  ? displayedPosts.length < filteredPosts.length
  : displayedPosts.length < allPosts.length;
    
 {showLoadMore && <Button onClick={handleLoadMore}>더보기</Button>}

 

`검색어가 있는 경우`: 현재 화면에 표시된 게시물보다 필터링된 게시물의 수가 많은지 확인합니다. (현재 게시물 < 필터링 게시물)

`검색어가 없는 경우`: 현재 화면에 표시된 게시물보다 전체 게시물의 수가 많은지 확인합니다. (현재 게시물 < 전체 게시물) 

 

`showLoadMore`의 true/false 여부에 따라 더보기 버튼을 활성화시킵니다.

 

 

 

 

 

회고 🧐

게시물 가져오는 걸 더보기 버튼을 눌렀을 때 동작하도록 했지만 이후에는 무한스크롤로 구현을 해볼 생각입니다.

 

 

아직 많이 부족하기 때문에 조언은 언제나 환영입니다~!