위코드 부트캠프 17기 1차 프로젝트 진행 중 와디즈 사이트를 클론 프로젝트 하게 되었고
내가 맡은 페이지는 공통 nav, footer 그리고 main 페이지다
무엇보다 제일 첫 화면이고 백엔드 분들과 지속적인 대화로 우리가 할 수 있는 기능들은 꼭 챙겨가고
기간내에 구현하지 못 할 것 같은 기능들은 타협을 하였다.
그 중에 내가 구현하고 싶지만 구현 못 할 것 같았던 기능중 한가지가 무한스크롤(Infinity scroll)이다.
구글링을 하면 많은 예시들이 있고 많은 참고를 하여 구현은 됬지만 이해가 정확하지 않아
블로깅으로 남겨본다.
Infinity scroll
일단 구현에 있어서 DOM탐색을 할 줄 알아야 했던 것 같다
DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있다고 하였고 물론 하기전에 DOM에 접근이
필수가 되며 그 시작은 document 객체에서 시작된다 DOM 트리에 대한 구조는 많은 사진으로 접 할 수 있으며 아래 그림은 어떤 관계를 통해 DOM 접근이 가능한지를 보여준다 !
document를 통해 어떻게 접근을 하는 것일까
먼저 아래와 같은 방식으로 document가 제공하는 프로퍼티를 통해 접근이 가능하다
<html>태그의 같은 경우 document.documentElement 이며
<body>는 document.body 로 자주 쓰이기도 한다
<head>는 document.head 로 접근이 가능하다그럼 DOM 트리 접근은 왜 필요 한 것일까?
바로 ! 우리가 작업하고 있는 페이지의 크기를 구하기 위해서다 !
https://javascript.info/size-and-scroll
많은 사람들이 화면의 길이 접근과 어떻게 다른지에 대한 설명이 자세히 나와있다고 하는 추천 사이트다!
(번역해서라도 슥보자) << 참고로 여기서 이해가 부족하다 geometry 즉 기하학 값에 접근하는 것인데..
중요한건 우리는 기능 구현 아래에 설명을 이어간다
무한스크롤은 width와 상관없이 height에 따라 작동한다 그 중 몇가지를 추려본다
scrollTop은 이미 위로 올라가버린 스크롤 된 화면의 높이이다
scrollHeight는 페이지의 총높이를 이야기한다 즉 화면에 보이지 않는 높이도 포함이다
clientHeight는 사용자에게 보여지고 있는 페이지의 높이다
아래와 같이 접근 가능하며
document.documentElement.scrollHeight
document.body.scrollHeight
위 사진은 스크롤 전의 사진이다 body와 html의 총높이가 같다.
하지만 스크롤을 하여 총 높이가 증가했다면 ?
위 사진과 같이 620px만큼 늘어났다
위에서 설명했던 html태그와 body태그의 총높이를 구한다
*(두가지를 구해 사용하는 이유는 총페이지를 핸들링할때 하나의 값만 참고하면 안된다고 한다)
아래의 사진을 참고해보자
먼저 html태그와 body태그의 총 높이를 비교하여 가장 큰 수를 구하고
이미 지나가버린 scrollTop또한 마찬가지로 구해 준다 하지만 clientHeight는
어짜피 현재 보여주는 화면이기에 html태그에 접근해서 구한다
즉 이미 스크롤 해버린 scroll의 값과 사용자가 보고있는 값인 clientHeight을 더한 값이
총 높이보다 크거나 같다면 ? 그 페이지는 끝에 도달한 것이다!
아래의 사진과 같다
(preItems은 0 , items는 추가하고 싶은 만큼의 갯수)
그때에 우리는 미리 정해놓은 state값(상품을 표시할 갯수)을 늘려주고
그 늘려주는 값들은 fetch로 받아오는 데이터를 slice로 쪼개 스프렌더 연산자로 추가해주며
그 해당 fetch가 끝났을 경우 window.addEventListener를 사용해 scroll시 함수를 실행해 준다
무한스크롤 시에 필요한 로직에 대한 설명은 이해했으나 기하학 속성값은 이해 못한 부분이 많다
나중에 추가적인 보충이 더 필요할 것 같다. ! !
많은 도움이 된 블로그 링크 감사합니다
https://medium.com/@ghur2002/react%EC%97%90%EC%84%9C-infinite-scroll-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-128d64ea24b5
https://medium.com/@_diana_lee/react-infinite-scroll-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-fbd51a8a099f
https://developer.mozilla.org/ko/docs/Web/API/Document/scroll_event
window.addeventlistener MDN
잘 훔쳐갑니다.