IntersectionObserver API with React

jhj46456·2020년 10월 11일
0

IntersectionObserver

✅ https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver

동작 원리는 Browser 화면에서 지정한 Element가 보이는지를 파악한 뒤 행동(callback)을 하는 API입니다.

IE를 제외하곤 대부분 지원합니다.

기본적인 사용법은 다음과 같습니다.

new IntersectionObserver(callback, options);
  • callback = (entries) => 지정한 target이 Browser 화면에서 보여질 때 실행할 함수
  • options : root, rootMargin, thresholds를 옵션으로 가짐
    1. root : 지정한 element를 감시할 상위(부모) 요소, undefined 혹은 null일 경우 최상위 문서의 viewport가 사용됨.
    2. rootMargin : root의 범위를 늘리거나 줄임. 기본 값은 "0px 0px 0px 0px"
    3. thresholds : Browser 화면과 얼마나 교차해야 callback을 실행하는지. 기본 값은 0 (보이는 순간 콜백 실행)

React

다음과 같은 무한 스크롤을 구현할 예정입니다.

Styling

📍 Styled-components

const Container = styled.div`
  display: flex;
  flex-direction: column;
  & .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    color: #eee;
    background-color: #aaa;
  }
`;

Component

📍 Typescript React

굳이 맨 마지막 요소가 아니더라도 가운데에서 callback을 실행시킬 수도 있습니다.

0개의 댓글