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

    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이라는 함수를 만들어서 파라미터로 받은 값과 상태 값이 다를 때 상태를 업데이트하도록 구현해주세요.

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