react paginate - pageview버튼

페이지네이션은 마치고 다음으로 버튼을 누르면 해당 숫자만큼 게시물 갯수가 바뀌는 기능구현을 했다. 이 부분은 react paginate에서 페이지에 몇개의 게시물이 뿌려질지에 관한 값을 변경해주면 될것으로 생각을 하고 기능구현을 진행 했다.

Home.tsx

  const [itemOffset, setItemOffset] = useState(0);
  const [pageview, setPageview] = useState(15);

  const itemsPerPage = pageview;

• itemsPerPage의 값이 페이지에 몇개의 게시물이 뿌려질지에 관한 값이 들어가기 때문에 이 부분을 기본값15인 useState를 만들어 관리 해줬다.

그 후 버튼 클릭 이벤트를 만들어 줬다.

const handlePageViewClick = (newPageView: number) => {
    setPageview(newPageView);
    setItemOffset(0);
  };

• 들어오는 인자값에 따라 pageview의 값이 변하게 해줬고 itemOffset값도 0으로 줘서 버튼을 누를때 마다 게시물의 갯수가 변하면서 1번째 페이지로 넘어가개 해줬다.

 <S.PageButtonBox>
	<S.PageButtonBox>
  	<S.PageButton
		className={pageview === 15 ? 'active' : ''}
		onClick={() => handlePageViewClick(15)}>
  		15
	</S.PageButton>
	<S.PageButton
		className={pageview === 30 ? 'active' : ''}
		onClick={() => handlePageViewClick(30)}>
  		30
	</S.PageButton>
	<S.PageButton
		className={pageview === 50 ? 'active' : ''}
		onClick={() => handlePageViewClick(50)}>
  		50
	</S.PageButton>

		<S.PageButton nonce="none">per page</S.PageButton>
	</S.PageButtonBox>
</S.PaganationWrap>

• 각 버튼별로 알맞은 숫자를 인자로 넘겨주고 버튼이 클릭 됬을때 active클래스네임을 추가해 활성화 되어있는 버튼을 만들어 줬다.

homeStyled.tsx

만든 버튼들을 배치하는 부분에서 페이지 네이션 버튼과 per page버튼을 감싸고있는 컴포넌트인 S.PaganationWrap에서 display:flex속성을 이용하면 될것으로 예상했지만 react paginate라이브러리의 사용 때문인지 전혀 먹히지 않았다. 비율맞추기가 힘들지만 position: relative속성을 이용해 따로 움직여서 배치를 마쳐줬다.

export const PageButtonBox = styled.div`
  display: flex;
  position: relative;
  top: -45px;
  right: -80%;
`;