32일차 (페이지네이션)

 페이지네이션을 백엔드에서 구현할 수 있었지만, 프론트엔드에서도 구현할 수 있다는 사실을 알고, 미니 프로젝트를 진행하면서 구현해 보았다.

 

 기본 설정은 yarn add react-paginate을 통해 react-paginate을 사용하였다.

 

 

상태관리하기(회사 데이터를 다루기 때문에 companies를 사용함)

데이터를 리스트에 담고 원하는 개수만큼 출력해야 하고, 한 페이지에 출력해야 하는 페이지 수를 관리해야 하기 때문에 useState를 통해서 상태관리를 하였다.

// 페이지 네이션
  const [companies, setCompanies] = useState([]);
  const [pageNumber, setPageNumber] = useState(0);

 

useState(data)를 사용해 상태관리

useState(data)를 사용해서 바로 companies에 data를 담고 싶었으나, 최초 렌더링시에 data가 바로 담기지 않는 문제가 있었고, 이에 따라 useEffect를 사용해서 data가 들어왔을 때 렌더링이 되는 방식을 사용하였다.

  useEffect(() => {
    if (data) {
      setCompanies(data.content);
    }
  }, [data]);

 

페이지 개수 관리

// 페이지당 원하는 수
  const companiesPerPage = 3;
  
  // 이전 페이지의 수
  const pagesVisited = pageNumber * companiesPerPage;
  
  // 총 페이지의 수
  const pageCount = Math.ceil(companies.length / companiesPerPage);

 

 

페이지 변환 함수

// 페이지 변환 함수
const changePage = ({ selected }) => {
	setPageNumber(selected);
};