-
[TIL] Day 27. 무한 스크롤 기능 구현하기(in React)IT 지식 2020. 10. 24. 17:21728x90
요즘 인스타를 포함해서 많은 사이트 등에서 활용하고 있는 무한 스크롤 기능을 구현해보는 시간을 가지도록 하겠습니다. 제가 진행하고 있는 프로젝트의 메인 페이지에서 적극 활용하고 있는 기능인데요, 그 원리가 생각보다 쉬워서 어렵지 않게 구현하실 수 있으실 겁니다.
무한 스크롤
무한 스크롤 기능을 사용하는 이유는 서버에서 보여줘야 하는 데이터의 양은 방대한데, 이를 한꺼번에 화면에 띄워주려 한다면 페이지 로딩도 오래 걸리고, 사용자의 입장에서도 원하는 데이터를 쉽게 찾기 어렵기 때문에, 특정 이벤트가 발동 될 때에만 소량의 데이터를 보여주기 위해 활용하는 것입니다.
step. 1 데이터 가져오기
무한 스크롤의 가장 기본이 되는 단계는 그만큼의 데이터를 가져오겠다는 신호를 보내는 것입니다. 데이터의 양이 부족하다면 아무리 무한 스크롤링을 하고 싶어도 할 수가 없는 상황이 되겠죠?
이번 포스팅에서는 mockdata를 활용해서 진행해보도록 하겠습니다.
constructor() { super(); this.state = { productList: [], items: 10, preItems: 0, }; } componentDidMount() { fetch("데이터 경로") .then((res) => res.json()) .then((res) => { let result = res.data.slice(this.state.preItems, this.state.items); this.setState({ productList: [...this.state.productList, ...result], }); }); window.addEventListener("scroll", this.infiniteScroll); }
데이터를 받아줄 빈 배열을 state에 선언한 후, 초기 아이템 개수를 설정해줍니다. 그리고 저희는 mockdata를 활용하기 때문에 mockdata의 일부분만을 가져오기 위해 slice 메소드를 활용하여 data.json에 있는 객체를 잘라줍니다(후에 백엔드와 데이터를 붙이게 된다면 이 부분은 바꿔줘야 하겠죠?). 그리고 window에 eventlistener를 설정해서 스크롤 이벤트가 발생했을 때, 무한 스크롤 기능이 실행될 수 있도록 해주면 됩니다.
페이지 속성 값
무한 스크롤 기능을 구현하기 위해 필요한 데이터 중의 하나가 바로 스크롤위 높이입니다. 컴퓨터 입장에서 스크롤이 어느 위치에 있는지를 알아야 그 타이밍에 맞게 해당 기능을 실행시켜줄 수 있을 테니까요. 그렇다면 이 수치를 어떻게 설정해야 할까요? 정말 다행히도 이 값은 브라우저에서 가지고 있습니다. 우리는 그 값을 활용하기만 하면 됩니다.
위의 사진을 보시면 인터넷 페이지와 관련한 다양한 높이와 너비값이 나와 있습니다. 이 중에서 우리가 눈여겨보아야 할 값은 'scroll top', 'client height', 'scroll height' 입니다.
'scroll top': 우리에게 보여지는 화면 위쪽(스크롤 위치 위쪽)의 높이 값입니다.
'client height': 현재 우리에게 보여지고 있는 화면의 높이 값입니다.
'scroll height': 현재 페이지가 가지고 있는 전체 높이 값입니다.
scroll top과 client height를 더한 값이 scroll height 값의 일정 부분 이상을 넘는다면 스크롤이 충분히 내려갔다는 뜻이 될테고 그때 이벤트를 실행시켜달라고 말하면 됩니다.
함수 구현하기
infiniteScroll = () => { let scrollHeight = document.documentElement.scrollHeight; let scrollTop = document.documentElement.scrollTop; let clientHeight = document.documentElement.clientHeight; if (scrollTop + clientHeight >= scrollHeight * 0.95) { this.setState({ preItems: this.state.items, items: this.state.items + 10, }); this.componentDidMount(); } };
우리가 필요한 값에 접근하는 방법은 DOM객체를 활용하는 것입니다. 브라우져의 documentElement 객체가 가지고 있는 각각의 값을 가지고 옵니다. 그리고 if 문을 활용해서 함수를 설정하는데, 이때 저는 scrollTop의 값과 clientHeight의 값을 더한 값과 scrollHeight의 95%에 해당하는 값을 비교했습니다. scrollHeight의 100% 값과 비교하려 했는데 미묘하게 100%가 되지 않아서 함수가 실행이 되지 않았습니다. 혹여나 무한 스크롤을 좀 일찍 발동시키거나 늦게 발동시키고 싶으신 분들은 이 높이 값을 설정해가면서 조절하시면 됩니다.
마무리
얼핏 보기엔 어려워 보이는 무한 스크롤 기능이지만 생각보다 쉽게 구현할 수 있었습니다!!
제가 참조한 사이트의 url을 남겨둘테니 보다 자세한 설명을 원하시는 분들은 조금 더 찾아보시면 좋을 것 같습니다.
velog.io/@hyounglee/TIL-56#%EC%B6%94%EA%B0%80-2%EC%B0%A8-%EC%88%98%EC%A0%95
728x90'IT 지식' 카테고리의 다른 글
[TIL]Day 29. 핀터레스트 레이아웃을 구현해보자! (0) 2020.10.25 [TIL]Day 28. CSS grid를 정리해보자! (0) 2020.10.25 [TIL]Day 26. 간단한 js 내장 객체 : math (feat. code kata) (0) 2020.10.16 [TIL]Day 25. map, sort, slice 에 관하여 (in javascript, feat.code kata) (0) 2020.10.15 [TIL]Day 24. map, reduce 메소드에 관하여 in javascript (0) 2020.10.13