자, 이 원리를 사용해 스크롤이 바닥에 가까워졌는지 감지하는 기능을 구현해보세요.
components/FeedList.js - onScroll
const (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이라는 함수를 만들어서 파라미터로 받은 값과 상태 값이 다를 때 상태를 업데이트하도록 구현해주세요.