더북(TheBook)

자, 이 원리를 사용해 스크롤이 바닥에 가까워졌는지 감지하는 기능을 구현해보세요.

components/FeedList.js - onScroll

const onScroll = (e) => {
  const {contentSize, layoutMeasurement, contentOffset} = e.nativeEvent;
  const distanceFromBottom =
    contentSize.height - layoutMeasurement.height - contentOffset.y;

  if (distanceFromBottom < 72) {
    console.log('바닥과 가까워요.');
  } else {
    console.log('바닥과 멀어졌어요.');
  }
};

이렇게 함수를 수정한 뒤 스크롤을 바닥까지 내렸을 때 터미널에 ‘바닥과 가까워요.’라는 문구가 출력되는지, 멀어졌을 때는 ‘바닥과 멀어졌어요.’라는 문구가 출력되는지 확인해보세요. 출력이 잘 됐다면 이를 통해 상태를 관리해보겠습니다.

FeedsScreen에서 hidden이라는 Boolean 타입의 상태를 만드세요. 그리고 onScrolledToBottom이라는 함수를 만들어서 파라미터로 받은 값과 상태 값이 다를 때 상태를 업데이트하도록 구현해주세요.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.