페이지네이션 뇌피셜

페이지네이션을 구현하는 방식 두가지

1. OnlyFront 

서버에서 미리 모든 데이터를 받아와서 프론트에서 잘라내 렌더링하는 방식

 

2. Hybrid

프론트에서 필요한 데이터를 서버에 그때그때 요청하여 받아와 렌더링하는 방식

 

1번은 제쳐두고

2번을 생각해보자

 

총 51개의 리스트가 있다고 가정하였을 때

 

A - 리스트를 나눠 몇개의 페이지가 필요한지 나타내는 배열상태 [ 1,2,3,4,5,6 ]

B - 페이지 내용을 나타내는 배열상태(10개씩)  [ a,b,c,d,e,f,g,h,i,j,k ]

C - 현재 페이지를 나나태는 배열상태 [ 1 ]

 

각 상태값을 할당과 렌더링 하려면?

A 할당 - 서버에서 데이터의 length //51 을 받는다. 51을 한 페이지에 보여줄 리스트갯수만큼 나눈 숫자를 반올림하여

6이라는 숫자를 획득 후 반복문으로 A배열에 0부터 5까지의 숫자가 들어간 배열을 할당해준다.

 

A 렌더링 - 페이지를 나타내는 버튼을 만들고 A배열을 map메서드로 돌려 i.pageNum + 1로 출력해준다.

---

B 할당 - useEffect로 현재 페이지를 나타내는 C(1)값을 먼저 서버에 요청하여 서버는 1에 맞는 0~9까지의 게시글을 응답해준다. 그 후 값을 할당해준다.

 

B 렌더링 - B배열을 map메서드로 돌려 출력해준다.

---

C 할당 - useState 기본값을 1로 사용하여 초기값을 할당해준다.

2페이지버튼을 눌렀을 때 setState로 해당 숫자를 할당해주고 2를 서버에 요청한다.

 

C 렌더링 - A배열로 만들어진 버튼에 C값을 시각적으로 강조해주어야한다. (3페이지면 3을 강조)

 이벤트위임을 통해 active 를 토글시켜주자. 모든 A버튼의 active를 제거 후 currentTarget에 active 추가하기