리스트 페이지

구현 기능

• 각 카테고리에 해당하는 상품 데이터 목록을 불러와 출력하도록 구현했다.
• 더보기 버튼을 클릭해 추가 데이터를 받아온다.

구현 코드

useEffect 훅을 이용해 쿼리에 저장한 카테고리 값이 변경되면 카테고리 아이디를 파라미터로 넘겨 getList thunk 함수를 디스패치해 서버로 API를 요청하고, 리스트 데이터를 받아온다.

카테고리 아이디를 넘길 때는 query값을 이용하는데 이때 qs 라이브러리를 사용했다. 기본적으로 query값은 문자열로 되어 있는데 qs 라이브러리를 사용하면 이를 객체로 쉽게 변환할 수 있기 때문이다.

더 받아 올 데이터가 있을 경우, 더 보기 버튼 클릭 시 onLoadMore 함수를 실행한다. 이때 카테고리 아이디와 오프셋값을 넘겨 loadMoreList thunk 함수를 디스패치해 추가 데이터를 받아올 수 있게 했다.

받아오는 데이터의 길이가 0이라면 에러를 처리하는 공통 컴포넌트로 카테고리에 해당하는 아이템이 없다는 텍스트 문구를 출력하도록 조건 처리했다.

ListPage.jsx

export default function ListPage({ location, match }) {
  const dispatch = useDispatch();
  const currentOffset = useRef(24);
  const beforeId = useRef(0);
  const query = qs.parse(location.search, { ignoreQueryPrefix: true });
  const { getListLoading, getListData, getListError, hasMore } = useSelector(
    state => state.product
  );
  const { id } = match.params;
   
  const onLoadMore = () => { 
    dispatch(
      loadMoreList({
        cateId: id,
        offset: currentOffset.current,
      })
    );
    currentOffset.current += 24;
  };
  
  useEffect(() => {
    document.title = `IKEA | ${query.sc}`;
    dispatch(getList({ cateId: id }));
    beforeId.current = id;
  }, [dispatch, id, query.sc]);

  if (getListLoading) return <Loading />;
  if (!getListData) return null;
  if (getListError) return <div>에러페이지</div>;

  return (
    <>
      <List
        title={query.sc}
        data={getListData}
        onLoadMore={onLoadMore}
        hasMoreList={hasMore}
      />
      <ButtonFix />
    </>
  );
}

List.jsx

function List({
  title,
  data,
  onLoadMore,
  hasMoreList,
}) {

  return (
    <>
      <ListWrapper>
	// ...
        <ListContainer>
          {data ? (
            data.length === 0 ? (
              <Error text="카테고리에 해당하는 아이템이 없습니다" grid />
            ) : (
              data.map(item => (
                <ListItem
                  data={item}
                  key={item.id}
                />
              ))
            )
          ) : null}
        </ListContainer>
      </ListWrapper>
      <ListBottom>
        {hasMoreList ? (
          data.length !== 0 ? (
            <ButtonRound onClick={onLoadMore}>더보기</ButtonRound>
          ) : null
        ) : null}
      </ListBottom>
    </>
  );
}
export default List;