리액트 프로젝트 3. 상품 리스트 , 페이지 네이션

ProductList -ProductResult

 

 

상위 ProductList 에서 필터링 된 결과 물이 나열되는 컴포넌트이다.

 

나는 이전에 기본적으로 grid 를 이용하여 grid-template-cloumns 를 repeat(4,1fr)을 지정해 두었다.

가로 4의 고정값을 가지고 있으면서,

나는 그럼 8개 (가로 4 * 세로 2) 이상이 넘어가면 페이지 네이션을 구현하고싶었다.

 

페이지네이션에 대한 유투브 자료들을 보면서 내가 해보고싶은 방법을 정리했다.

원리는 다음과 같았다.

1.페이지 수를 유동적으로 만들것.

 

페이지 수 =  총갯수에서 현재 표현할 갯수 의 올림 의 계산이 나온다.

올림을 이용하는 메서드가 있었고 .

그로인해 이런 공식을 만들 수 있었다.

//현재 보여질 페이지 아이템 수.
const itemsPage = 8; 

//총 아이템 수
const totalItems = selectItem.length;

//총 페이지는 총아이템수 나누기 현재 보여지 페이지 아이템수 올림계산
const totalPages = Math.ceil(totalItems / itemsPage);

 

2. 1페이지에는 0~7번까지 2페이지는 8~15번까지

필터한 아이템을 slice를 통해 잘라내버리면 되지 않겠냐.

 

page라는 state 값은 상위( ProductList )에서 관리하며

처음에는 1이 들어오도록 설정.

slice(0 - 8)

slice(8 -16)

이라는 공식은

 

1페이지 기준

(현재 페이지 -1 * 보여줄 아이템 수)=> (1-1 * 8) => (0)

(현재 페이지 * 보여줄 아이템 수)=>(1 * 8)=>(8)

2페이지 기준

(현재 페이지 -1 * 보여줄 아이템 수)=> (2-1 * 8) => (8)

(현재 페이지 * 보여줄 아이템 수)=>(2 * 8)=>(16)

 

이 나오기 때문에 변수로 받아 관리할 수 있다.

//selectItem 에서 걸러낼 slice (0~8 /8~16... )
const paginatedItems = selectItem.slice((page - 1) * itemsPage, page * itemsPage);

 

 이 paginatedItems 는 필터의 필터를 거친 마지막 결과물임을 알 수 있다.

이 결과물은 최대 8개를 보여주는 배열이다.

 

버튼을 형성하는것은 return 내에서는 반복문이 돌아가지 않아서

함수로 빼서 진행하였다.

 

for문을 돌려 총페이지 수만큼 돌려 만들어 배열속에 집어넣어 리턴한다.

    //for문이 JSX에서 돌아가지 않아서 함수로 따로 뺌. page라는 배열에 button을 만들어 추가.
    const pageNation = ()=>{
        let pages = [];
        for (let i = 1; i <= totalPages; i++) {
            pages.push(<button value={i} className='centerButton' onClick={()=>onClickPage(i)}
            style={{ boxShadow: page === i && 'inset 0px -5px 0px rgba(166, 255, 0, 0.233)' ,
                color: page === i && 'red' ,
                fontSize : page ===i && '18px',
                fontWeight : page===i && '700'}}>{i}</button>)
        }
        //결과값을 page라는 배열을 반환.
        return pages;
    }
    
    //매개변수를 받아 그 값으로 currentPage 값을 바꿈.
    const onClickPage =(page)=>{
        setPage(page)
    }

 

여기서 사용한 &&연산자는 현재 페이지가 현재 클릭한 숫자인 i 라면 스타일링을 지정하기 위한 연산자이다.

 

 

상황에 따라 페이지가 유동적으로 형성되는것을 확인 할 수 있다.

물론 10개 이상이 되었을때의 처리는 어떻게 하게될지 조금 더 깊게 생각해봐야겠지만 ,

아직은 상품 19개만 다루기 때문에 페이지가 많지 않다.