[ project ] 도서 검색 사이트 _ 도서 목록 리스트 출력

문제 상황

무한 스크롤 구현 중 검색어가 바뀌면 새롭게 목록이 변해야 하는데 이전 목록에 쌓이는 현상이 발생했다. 검색어가 바뀌면 책리스트 상태값에 concat을 하여 배열이 쌓이게 하고, 검색어가 없다면 ("") 배열의 내용을 빈내용으로 바꾸어 빈 리스트를 보여주도록 코드를 작성 했다.
searchValue input값이 변할때마다 concat을 하여 쌓이게 하여 다른 검색어를 입력 해도 이전 목록이 지워지지 않고 해당 목록에 쌓이는 현상이 발생 했다.

  useEffect(() => {
    if (searchValue) {
      bookSearchHandler(searchValue, sortel[sort], page).then((res) =>
        getBookList((prev) => prev.concat(res.documents))
      );
    } else if (!searchValue) {
      getBookList([]);
    }
 
  }, [page, searchValue]);

첫번째 페이지를 불러오는 로직과 스크롤에 따라 페이지를 불러오는 로직이 분리 되지 않고 하나의 코드로 작성 됐다는 것을 알게 되었다.

해결 방법

첫번째 페이지 api를 불러 오는 로직과, 스크롤을 내리면 페이지 별로 api를 호출하는 로직을 분리 했다.
1. 첫번째 페이지를 불러오는 함수는 bookSearchHandler(searchValue, sortel[sort], 1) 함수를 호출한다. 이 함수는 searchValue가 변할 때마다 실행이 되게 한다.
2. 스크롤이 변화되어 타겟이 감지 되는 순간에는 bookSearchHandler(searchValue, sortel[sort], page)함수를 호출한다. 이 함수는 page가 변화 할때마다 실행이 되게 한다.

  useEffect(() => {
    if (searchValue) {
      bookSearchHandler(searchValue, sortel[sort], 1).then((res) =>
        getBookList(res.documents)
      );
    } else if (!searchValue) {
      getBookList([]);
    }
  }, [searchValue, sort]);
  useEffect(() => {
    if (searchValue) {
      bookSearchHandler(searchValue, sortel[sort], page).then((res) =>
        getBookList((prev) => prev.concat(res.documents))
      );
    } else if (!searchValue) {
      getBookList([]);
    }

  }, [page]);

검색어가 바뀔때마다 책 목록이 알맞게 바뀌는 것을 알 수 있다.