Pagination

Pagination (Query String)

• 페이지네이션 기능

  한꺼번에 많은 양의 데이터를 보내지 않고 일정 길이로 끊어서 보내는 것을 페이지네이션 기능이라 한다.

• 페이지네이션 구현

  페이지네이션을 구현하기 위해선 프론트엔트에서 백엔드로 한페이지 내 보여질 데이터의 갯수, 데이터가 시작될 위치를 백엔드와 key 이름을 맞춰서 쿼리스트링 형식으로 전달하게 된다.

  url 에서 ? 기호를 쓰게되면 그 이후의 값은 쿼리스트링이 된다.(url 내에서 ?은 한번만 쓰인다.) 기본적으로 데이터의 갯수의 key이름은 limit, 데이터가 시작될 위치의 key 이름은 offset으로 하는 것이 컨벤션이다.

  전달해야할 인자가 여러개인 경우 &로 연결하여 전달한다

  fetch(
        `http://10.58.5.57:8000/drinks?limit=${LIMIT}&offset=${offset * LIMIT}`
      )
        .then((res) => res.json())
        .then((res) => this.setState({ coffee: res }));

• componentDidUpdate() 내 fetch 함수 호출 vs 이벤트 함수 내 fetch 함수 호출

  componentDidUpdate 는 상태값이 변경할 때마다 라이프사이클에 의해 발생하는 함수로 최초 렌더 이후 상태값을 변경하여 데이터 호출이 필요한 경우 사용해주고 유저의 이벤트 발생에 의해 데이터를 가져오는 게 필요한 경우는 이벤트 발생 함수를 선언하고 해당 함수 내에서 fetch 함수를 호출하여 준다.