목록으로 facebook/react 레포지토리의 이슈를 모아볼 수 있습니다.
출력되는 내용은 이슈 번호, 이슈 제목, 작성자, 작성일, 코멘트 수 입니다.
IntersectionObserver를 이용하여 구현한 무한 스크롤 기능으로 편리한 탐색이 가능합니다.
let observer: IntersectionObserver;
if (target && target.current) {
observer = new IntersectionObserver(onIntersect, { threshold: 0.9 });
observer.observe(target.current);
}
return () => observer && observer.disconnect();
옵저버 객체 observer
를 생성하고, useRef
으로 가리키는 타겟 target 을 옵저빙하도록 등록합니다.
threshold를 0.9로 설정함으로써 뷰포트와 타겟이 90% 이상 교차할 (Intersect) 때에만 콜백 함수를 실행하도록 합니다.
const onIntersect: IntersectionObserverCallback = useCallback(
([entry], observer) => {
if (entry.isIntersecting) {
observer.unobserve(entry.target);
onIntersectCallback();
setTimeout(() => {
observer.observe(entry.target);
}, 5000);
}
},
[onIntersectCallback]
);
Intersect 시에 실행되는 함수입니다.
isIntersecting
속성을 통해 교차되었는지 여부를 판단할 수 있습니다.
교차 중일 때는 임시로 옵저빙을 해제하여 중복된 코드 실행이 발생하지 않도록 합니다.
또한 한 번에 교차 이벤트가 여러 번 발생하는 것을 방지하기 위해 setTimeout
을 통해 다시 옵저빙을 시작할 때까지 딜레이를 주었습니다.
이슈 항목을 클릭하면 상세 보기 페이지에 접속할 수 있습니다.
이슈의 실제 내용을 react-markdown
을 이용하여 출력하였습니다.
작성자와 작성 일자, 코멘트 개수, 제목을 함께 볼 수 있습니다.