6.5.2 스크롤을 내렸을때 글쓰기 버튼 숨기기

스크롤을 내렸을 때 글쓰기 버튼을 숨기는 기능을 구현해봅시다. 기능을 개발하고 테스트할 때마다 매번 항목을 여러 개 추가하기는 번거로우니, LogContext에서 logs 기본값을 잠깐 변경해줍니다.

contexts/LogContext.js - logs

const [logs, setLogs] = useState(
  Array.from({length: 10})
    .map((_, index) => ({
      id: uuidv4(),
      title: `Log ${index}`,
      body: `Log ${index}`,
      date: new Date().toISOString(),
    }))
    .reverse(),
);

Array.from 함수를 사용해 길이가 10인 배열을 생성한 뒤 map 함수를 통해 객체 배열로 변환해줬습니다. 복사/붙여넣기를 하는 것보다 이렇게 하는 게 훨씬 간결합니다.

스크롤을 내렸을 때 글쓰기 버튼을 숨기기 위해서는 일단 스크롤이 FlatList 컴포넌트의 바닥에 가까워졌는지 감지할 수 있어야 합니다. FlatList에서 바닥에 닿았을 때 어떤 작업이 하고 싶다면 onEndReached 함수와 onEndReachedThreshold 값을 설정하면 됩니다.

<FlatList
  (...)
  onEndReached={(distanceFormEnd) => {
    console.log('바닥과 가까워졌어요!');
  }}
  onEndReachedThreshold={0.85}
>