[React] useSearchParams 사용해서 Paging 구현하기

 

1. 페이지 번호를 넣을 배열을 생성합니다

 let pageNumbers = [];

  for (let i = 1; i < 10; i++) {
    pageNumbers.push(i);
  }

 

2. 배열에 담긴 값을 버튼에 매핑합니다. 컴포넌트는 Chakra ui를 사용했습니다.

onClick 이벤트에 있는 handlePage(pageNumber)로 버튼의 페이지 값을 전달합니다

<Center>
        <Box>
          {pageNumbers.map((pageNumber) => (
            <Button key={pageNumber} onClick={() => handlePage(pageNumber)}>
              {pageNumber}
            </Button>
          ))}
        </Box>
      </Center>

 

 

3. onClick 이벤트로 받아온 pageNumber를 searchParams에 추가합니다.

이후, 쿼리스트링이 포함된 경로로 이동합니다

function handlePage(pageNumber) {
    searchParams.set("page", pageNumber);
    navigate(`/?page=${pageNumber}`);
  }

 

4. 받아온 쿼리스트링을 searchParams를 이용해 axios.get()요청을 보냅니다.

페이지로 구분된 데이터를 boardList에 저장합니다.

useEffect의 deps에 searchParams을 넣어주어 페이지가 전환되면 요청이 발생합니다.

useEffect(() => {
    axios.get(`/api/board/list?${searchParams}`).then((res) => {
      setBoardList(res.data);
    });
  }, [searchParams]);

 

 

결과