[RN] react-native Pull Down refresh

반응형

🐰: Appl App 심사를 위해서는 '차단'기능 필수 더라구요.

3번의 리젝 후 백엔드 프로님과 후다닥 차단 기능을 추가했어요🙈

오늘 포스팅할 기능은

앱에서 화면을 아래로 당겨서 새로고침 하는 방법입니다.

 

Pull Down Refresh - 화면 아래로 당겨서 새로고침 하기

 

---

import styled from '@emotion/native';
import { useQuery } from '@tanstack/react-query';
import React, { useCallback, useRef, useState } from 'react';
import { RefreshControl } from 'react-native';
import {
  Container,
  ContentBox,
  Row
} from '../../config/globalStyles';
import { BoldText, RegularText } from '../../config/globalTexts';
import { queryClient } from '../../react-query/queryClient';

function MyBanList() {  
  const containerRef = useRef<any>(null);
  const [refreshing, setRefreshing] = useState(false);
  
  const refreshKeys = [
    ['getBannedMember'],
  ];
  
  const onRefresh = useCallback(() => {
    refreshKeys.map(key => {
      queryClient.refetchQueries(key);
    });
  }, [queryClient]);
  
  return (
    <Container
    ref={containerRef}
    refreshControl={
      <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
    }>
      <BoldText size={45} lineHeight={55} mb={20}>
        Pull Down Refresh
      </BoldText>

      <ContentBox>
          <RegularText size={26} lineHeight={38} color={theme.darkGray} align='center'>
            화면 아래로 당겨서 새로고침 하기
          </RegularText>
      </ContentBox>
    </Container>
  );
}

export default MyBanList;

*전체 코드중 일부 코드만 발췌하였습니다.*

 

 

코드설명

1.새로고침 기능 구현:

• 화면을 당겨서 새로고침하는 기능은 RefreshControl 컴포넌트를 사용(rn에서 제공하는 컴포넌트)하여 구현했습니다. 이 컴포넌트는 refreshing 상태와 onRefresh 콜백 함수를 props로 받습니다.
• refreshing 상태는 현재 새로고침 작업이 진행 중인지 여부를 나타내주고, useState 훅을 사용하여 상태를 관리됩니다.
• onRefresh 함수는 useCallback 훅을 사용하여 성능 최적화를 위해 정의되었습니다. 이 함수는 queryClient.refetchQueries를 호출하여 데이터를 다시 가져오는 역할을 합니다.
•   const refreshKeys = [
      ['getBannedMember'],
    ]; refreshKeys에다가는 새로고침을 할때 새로고침 되어야 하는 데이터를 불러오는 api의 쿼리키를 담아줍니다.

 

2.React Hooks 사용:

• useRef 훅은 containerRef 변수를 통해 DOM 노드나 컴포넌트 인스턴스에 접근할 수 있습니다.
• useState 훅은 refreshing 상태를 관리하며, 화면을 당겼을 때 새로고침이 진행 중인지를 판단합니다.
• useCallback 훅은 onRefresh 함수를 메모이제이션하여 컴포넌트의 재랜더링 성능을 최적화합니다.

---

 

위와 같이 정리하면 아래 gif처럼 컴포넌트를 아래로 당기면

refreshKeys에 담겨있던 쿼리키에 해당하는 데이터들이

새로고침되어 화면에 나타납니다.👏🏻

Pull Down Refresh - 화면 아래로 당겨서 새로고침 하기 gif