웹페이지 중 더보기 버튼을 클릭을 하거나, 웹페이지 맨 하단으로 스크롤을 내릴 경우 다음페이지를 표시해주는 페이지들을 많이 보셨을 겁니다.
포스팅에서는 Svelte를 예로 들어 설명하지만, 코드는 자바스크립트 코드이니 다른 곳에서도 적용가능합니다.
시작 하기 앞서…
1.restapi 호출에 관련 기본적인 내용은 다루지 않고 있습니다.
2.restapi 호출로 axios를 사용했지만, 다른 resatpi 함수 및 라이브러리도 모두 사용가능합니다.
(1~4)axios, onMount 라이브러리를 사용하기 위해 import를 해줍니다.
(6~11) api 호출에 사용될 변수(url,params,skip,page)와 호출값을 임시 저장할 변수(result)1개, 메인 값 저장할 변수(data) 하나를 생성합니다.
(1)데이터 요청을 할 함수를 하나 만들어 주는데, 변수 2개를 입력 받을 수 있도록 해주고, async 를 통해 비동기 처리 해주도록 합니다.
(2~3) 호출하기에 필요한 주소 및 파라미터 값을 할당해주고,
(4) axios를 통해 data 값을 받아 result 변수에 임시 저장합니다.
(5) 페이지가 처음 뜰때(onMount)와 더보기 및 화면 끝까지 스크롤을 내릴 때, 2가지 상황이 발생하니, 처음은 data변수에 바로 저장하고, 두 번째부터는 호출할 때마다 result값을 data에 추가할 수 있도록 해줍니다.
(1~3)onMount를 이용해 페이지가 뜨면 미리 만들어 놓은 api호출 함수를 실행하게 해줍니다.
(1) 이벤트리스터를 통해 스크롤 위치에 따라 이벤트가 발생하도록 해줍니다.
(2~6) 현재 스크롤의 위치(SCROLLED_HEIGHT) + 화면의 표시는되는 세로 크기(WINDOW_HEIGHT) = 페이지의 전체 세로 크기(DOC_TOTAL_HEIGHT)가 되어야만 페이지 맨 밑에 도달한 것이므로, if문 통해 해당 조건이 만족시에 미리 만들어 놓은 api호출 함수가 실행되도록 코드를 작성합니다.
여기서 주의하실 점은 예를 들어 호출 때마다 20개씩 불러 온다면, 처음은 0(skip)~19(page)가 될테고 다음은 20(skip)~39(page)가 되어야 하니 함수 실행전 호출당 불러들이는 리스트의 갯수(page)를 skip에 쌓이도록 += 연산자를 써주도록 합니다.
여기까지하면 화면 맨 하단에 도달하면, 자동적으로 api호출이 일어나게 되고, 기존의 data에 새로 호출된 result값이 저장되면서 새로운 데이터가 이어서 표시가 될것입니다.
위의 화면 맨 밑을 인식하는 방법이 아닌 더보기 버튼을 이용하여 호출하고 있다면, 이벤트리스터 코드에서 호출함수와 호출할 데이터의 위치를 변수만을 가지고 함수를 만들어서 버튼에 적용해주시면 됩니다.
