[TIL] 2023. 1. 11. React Native 검색 기능 구현 (with React Query, refreshControl)

suno·2023년 1월 11일

✅ 오늘 한 일

검색 기능 구현

검색 결과 받아서 UI 렌더링

검색어를 입력 후 getDetail로 정보를 받아와 state에 저장하는데, UI가 바로 업데이트 되지 않음
⇒ queryClient.invalidateQueries(’search’) 사용하니 refetch 잘 됨.

const { isLoading, isFetching, isError, data } = useQuery({
  queryKey: 'search',
  queryFn: () => getDetail(value),
  enabled: isClick,
  onSuccess: () => {
    setResult(data?.culturalEventInfo?.row);
    setIsClick(false);
    setValue('');
    queryClient.invalidateQueries('search');
  },
});

Refresh Control

export default function Search() {
  const [refreshing, setRefreshing] = useState(false);
  const [value, setValue] = useState('');
  const [result, setResult] = useState([]);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const queryClient = useQueryClient();

  const { data, isLoading, isFetching, isError, refetch } = useQuery({
    queryKey: ['search'],
    queryFn: () => getDetail(value),
    enabled: isSubmitted, // submit 되었을 때만 query가 실행 됨
    onSuccess: () => {
      setResult(data?.culturalEventInfo?.row);
      setIsSubmitted(false);
      setValue('');
      queryClient.invalidateQueries('search'); // invalidate하여 다시 fetch
    },
  });

  // pull to refresh
  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await refetch();
    setRefreshing(false);
  }, []);

  return (
    <ScrollView
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    >
      ...
    </ScrollView>
  );
}

Header Icon

{/* 메인 페이지 */}
<Tab.Screen
  options={{
    headerTitle: () => <LogoTitle />,
    headerRight: () => (
      <SearchButton
        onPress={() => navigate('Stack', { screen: 'Search' })}
      />
    ),
    title: '메인',
    tabBarIcon: ({ color, size }) => (
      <AntDesign name="home" size={size} color={color} />
    ),
    tabBarActiveTintColor: PINK_COLOR,
  }}
  name="Main"
  component={Main}
/>

review CRUD 커스텀훅 리팩토링

중구난방이던 코드를 useReviews라는 커스텀훅을 만들어 로직을 분리했음.
훨씬 깔끔해지고 가독성이 좋아짐.
CRUD 관련해서 로직을 변경할 때는 커스텀훅만 건들면 됨.

import { useMutation, useQueryClient } from 'react-query';
import { createReview, deleteReview, updateReview } from '../common/api';

const useReviews = () => {
  const queryClient = useQueryClient();

  const mutationAdd = useMutation(createReview, {
    onSuccess: () => {
      queryClient.invalidateQueries('reviews');
      queryClient.invalidateQueries('myreviews');
    },
  });

  const mutationDelete = useMutation(deleteReview, {
    onSuccess: () => {
      queryClient.invalidateQueries('reviews');
      queryClient.invalidateQueries('myreviews');
    },
  });

  const mutationUpdate = useMutation(updateReview, {
    onSuccess: () => {
      queryClient.invalidateQueries('reviews');
      queryClient.invalidateQueries('myreviews');
    },
  });

  return [mutationAdd.mutate, mutationDelete.mutate, mutationUpdate.mutate];
};

export default useReviews;