6.5.4 예외 처리하기

이번에 구현한 버튼 숨기기 기능에 예외 처리를 해야 할 상황이 두 가지 있습니다.

첫 번째, 항목 개수가 적어서 스크롤이 필요 없는 상황입니다. 안드로이드에서는 스크롤 없이 모든 항목을 보여줄 수 있는 상황에서는 아예 스크롤이 방지되어 상관없지만, iOS에서는 스크롤이 필요 없는 상황에서도 화면을 세로 방향으로 스와이프하면 FlatList 내부의 내용이 움직이면서 onScroll 함수가 호출됩니다. 따라서 contentSize.height > layoutMeasurement.height 조건을 만족할 때만 버튼을 숨기도록 로직을 수정해야 합니다.

두 번째, onScrolledToBottom Props가 설정되지 않았을 때입니다. 추후 캘린더 화면과 검색 화면에서도 이 컴포넌트를 재사용할 텐데 해당 화면에서는 FloatingWriteButton을 보여주지 않기 때문에 버튼을 숨기는 로직이 필요하지 않습니다. 따라서 함수가 없으면 아무것도 하지 않도록 수정해야 합니다.

onScroll 함수를 다음과 같이 수정해주세요.

components/FeedList.js - onScroll

const onScroll = (e) => {
  if (!onScrolledToBottom) {
    return;
  }

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

  if (
    contentSize.height > layoutMeasurement.height &&
    distanceFromBottom < 72
  ) {
    onScrolledToBottom(true);
  } else {
    onScrolledToBottom(false);
  }
};