React-native

무한스크롤, 새로고침 함수 snippet 만들어봤다

파란배개 2022. 3. 25. 12:59
const getNextFetch = useCallback(() => {
    const onEndReached = () => {
      if (
        (meta.pageNo - 1) * meta.pageSize + meta.numOfRows <
        meta.totalCount
      ) {
        myUboApis.getMyUbo(meta.pageNo + 1).then((res: dataInterface) => {
          setMyUbo([...myUbo!, ...res.rows]);
          setMeta(res.meta);
        });
      }
    };
    onEndReached();
  }, [meta]);
  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await myUboApis.getMyUbo(1).then((res: dataInterface) => {
      setMyUbo(res.rows);
      setMeta(res.meta);
    });
    setRefreshing(false);
  }, [meta]);
  useEffect(() => {
    myUboApis.getMyUbo(meta.pageNo).then((res: dataInterface) => {
      setMyUbo(res.rows);
      setMeta(res.meta);
    });
  }, []);

getNextFetch는 flatList의 onEndReached 속성에, 두고 onEndReachedThreshold에는 onEndReached에 들어갈 콜백이 실행될 조건인 화면 및에서 어느정도 떨어진 부분에 도달하는가(숫자임. 맨 아래가 0)가 들어간다.

onRefresh는 onRefresh 속성에 넣고 refreshing 속성에는 onRefresh가 실행될 조건인 boolean이 들어간다.