PAGINATION

Beom·2022년 5월 7일
0

WE-CODE

목록 보기
7/8

버튼 클릭 이벤트

  • 각각 버튼마다 다른 인덱스를 통해서 쿼리스트링 안에 있는 offset 을 구성해주어야 하기 때문에 버튼마다 각각 다른 값을 인자로 받도록 설정해주어야 한다
  • 버튼마다 다른 인덱스 값을 전달 해준다
  • 인자로 전달받은 인덱스 값을 저장해서 각각 다른 쿼리스트링을 구성해보자
    limit / offset 필요
    limit은 화면에서 그려줄 데이터의 총 갯수
    offset은 데이터의 시작점을 의미 (1번 버튼 -> offset은 0, 1은 20, 2는 40, 3는 60, 4는 60 5는 80)
const limit = 20;
const offset = buttonIndex * limit;

QueryString 구성

offset 설정을 기반으로 쿼리 스트링을 설정해주자

const queryString =`?limit=${limit}&offset=${offset}`

?는 쿼리스트링의 시작을 알려줌
위의 쿼리스트링을 url에 반영시켜주자
동적라우팅도 버튼 눌렀을때 아이디값이 url에 들어간것처럼
쿼리스트링이 url에 들어가도록 구성해보자
-> useNavigate 훅 사용
navigate(queryString)

동적라우팅 -> 앞에 현재 위치 등 / 넣어줬었다
navigate(/pagination?limit=${limit}&offset={offset}
넣어도 되고 안넣어도 된다

데이터 Fetching

  • 위에서 쿼리스트링을 만들어서 url에 넣어줬었다
    동적라우팅에서는 url 반영한 뒤 useEffect 를 통해서 값을 토대로 fetching 했었다 (useParams 사용 -> id값으로)
    백엔드 api뒷부분에 붙여서 데이터 통신을 하면 원하는 데이터를 가져올 수 있다

  • querystring은 uselocation 훅을 사용한다
    location 출력해서 확인해보면 location 객체 안 search를 프로퍼티 이름을 통해서 url에 존재하는 querystring 정보를 가져올 수 있다

-location.search 가 바뀔때마다 sideeffect가 실행이 되어야 하기 때문에 의존성 배열 안에 넣어줘야한다


데이터 초기갑 설정

처음에 화면에 들어왔을 때 100가지 다 들어온다
(location 출력을 해보면 처음에 컴포넌트가 마운트 된 후에는 search가 빈 문자열이다 구성된게 없기 때문에, 빈 문자열은 데이터 전부가 들어오게 된다)
처음 조건을 구성해주어야 모든 데이터가 들어오지 않을 수 있다
빈 문자열일 경우 조건 -> || 연산자 활용
(||앞이 falsy일 경우 뒷부분 출력)
or or 연산자를 사용해서 초기값을 쿼리스트링 값이 없을 때 초기값을 부여할 수 있다


Refactoring

limit의 값은 변하지 않으므로 컴포넌트 밖에서 선언해주자
const LIMIT = 20;


코드

0개의 댓글