Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- Vanilla
- Nomad coder
- 느낀 점
- 계획
- 마무리
- Hook
- 자바스크립트
- Nomad
- Firebase
- 클론코딩
- Nicolas
- CSS
- Netflix
- react
- Clone
- coding
- Project
- scflix
- javascript
- TiMER
- 프로젝트
- vanilla js
- 코코아톡
- github
- react-native
- 바닐라 자바스크립트
- 오류
- react-hook
- expo
- HTML
Archives
- Today
- Total
꾸매코딩
[Netflix] Infinite Scroll 기능 구현, Recommend Data 출력 본문
Project/Netflix [React + Hooks]
[Netflix] Infinite Scroll 기능 구현, Recommend Data 출력
꾸매코더 2021. 9. 17. 13:13반응형
결과
Infinite Scroll 기능을 구현하였다.
Api 데이터에서 해당 [ Tv / 영화 ]와 관련된 추천 영상을 불러와서 출력해주었다.
Infinite Scroll
Tv / 영화 두 곳에서 필요로 하기 때문에 기능이 중복된다.
따라서 Custom Hook으로 따로 분리해주었다.
page값이 url 마지막에 붙어(...&language=en-US&page=1) 있어서 params : { page : page }로 전달해주었다.
lodash uniqBy()로 id 값을 비교해서 중복을 방지해주었다.
[ useInfiniteScroll.js ]
import { useEffect, useState } from 'react';
const useInfiniteScroll = () => {
const [page, setPage] = useState(1);
const handleScroll = () => {
const scrollHeight = document.documentElement.scrollHeight;
const scrollTop = document.documentElement.scrollTop;
const innerHeight = window.innerHeight;
if (scrollHeight <= scrollTop + innerHeight) {
setPage(page => page + 1);
}
return;
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return page;
};
export default useInfiniteScroll;
Infinite Scroll - 오류
innerHeight 값이 필요하였는데, clientHeight 으로 계산을 실수하여 스크롤중 여러 페이지를 불러오는 상황이 발생하였다.
계획
추천 프로그램에 슬라이더(Slider) 효과를 적용할 예정이다.
각 페이지 [ 홈 / Tv / 영화 ] 배치와 CSS를 수정할 예정이다.
코드
https://github.com/ssc9811/scflix-hook
반응형