Pagination & Infitnite-Scroll
오늘은 Pagination과 Infinite-scroll에 대해 알아보자.
구글에 들어가서 검색을 한 뒤 아래로 스크롤을 내리면 페이지들의 번호가 매겨져있고 각 페이지를 누르면 해당 번호의 페이지로 이동해서 게시물들을 볼 수 있다.
사용자들에게 이런 방식으로 페이지를 보여주는 기법을 페이지네이션이라고 한다.
페이지네이션은 아래로 내렸을 때 금방 footer를 찾을 수 있고, 사용자의 의도에 맞게 페이지를 넘길 수 있으며 원하는 게시글을 찾았을 때 그 게시글의 대략적인 위치를 파악할 수 있다.
하지만 한 페이지에 제한된 내용을 담고 있고 버튼을 일일히 클릭하고 페이지가 로드될 때까지 기다려야 된다는 단점이 있다.
현재는 모바일이 보편화되어 작은 화면에 많은 정보를 담아야 하는 상황이 많고 무한스크롤은 한 페이지에 모든 정보가 담겨 있다. 페이지네이션처럼 일일히 페이지를 클릭하기 보다는 아래로 스와이프해서 내리는 것만으로도 페이지를 불러올 수가 있어서 더 나은 사용자 경험을 제공한다.
하지만 아래로 내렸을 때 페이지 로딩 속도가 느리다면 사용자가 답답함을 느껴서 금방 나가버릴 수 있다. 그리고 페이지를 아래로 내리면 내릴 수록 결국 점점 더 많은 페이지들이 쌓이게 되고 그로 인해 페이지 성능이 떨어진다. 그리고 보여주는 페이지의 양이 많을 수록 맨 밑의 푸터에 접근하는 것이 힘들어진다.
이처럼 페이지네이션과 무한스크롤은 각각의 장단점이 있다. 상황에 맞게 적절한 인터페이스를 적용한 좋은 예시가 바로 구글이다.
구글과 같은 경우 사용자들이 이미지를 볼 때가 텍스트를 볼 때 보다 스크롤 속도가 훨씬 빠르기 때문에 이미지 카테고리에선 무한스크롤이 적용되고 전체 검색 결과나 뉴스 검색 결과 같은 경우 이미지 보단 텍스트가 많이 때문에 페이지네이션을 적용한 것을 볼 수 있다.
useQuery 로 불러온 객체 안에는 refetch 메서드가 있다. refetch를 이전까지는 mutation 직후 자동으로 데이터를 재요청하기 위해 refetchQueries를 사용했었는데, 이번엔 자동으로 재요청되는 것이 아닌 이벤트 핸들러가 트리거가 되었을 때 재요청을 해야해서 useQeury의 refetch 메서드를 사용했다.
refetch는 refetchQueries와 달리 variables를 선택적으로 넣을 수 있다. 만약 넣지 않았다면 기본값으로 그 전 값으로 재요청한다.
event.target 과 event.currentTarget 의 차이 이해하기 !!
event.target은 클릭한 태그가 아닌 경우(이벤트 버블링)가 있고, currentTarget은 무조건 클릭한 타겟(태그)이다.
배열 메서드에서 안 쓰는 인자는 _ 로 쓰는 것이 관례(?)
예시) [1,2,3].map((_, index) => console.log(index));State Lifiting
- 자식 컴포넌트1의 state와 setState를 지우고 같은 state와 setState를 부모 컴포넌트에 주고 자식들에게 똑같이 제공. -> state lifting
