[React_Native_Study_10]React query 사용하여 검색기능 활용

React query를 활용한 검색기능 구현

1) react query 를 통해 검색기능을 구현할 때 

- 1) 사용자가 검색할 query를 <TextInput> 컴포넌트로 전달받아서 어떻게 fetch function에 전달할 것인가?

 

아래와 같이 useQuery를 사용할 때에 

   const {isLoading:,data:, isRefetching:}=useQuery(['todos','goMountain'],fetch function)

    // fetch runction 내에 info라는 정보를 확인하면 useQuery에서 보내는 'key'값이 들어있다.
    fetch function:(info)=>{
    fetch().then((res) => res.json())
    )

info 에 들어있는 내용 --> 즉 useQuery를 사용할 때 key는 꼭 string 형태가 아닌 배열의 형태 ['todos','goMountain'] 도 가능하므로 Text input으로 받는 query를 배열의 key 형태로 넘겨 준다.

// info 의 내용

Object {
  "meta": undefined,
  "pageParam": undefined,
  "queryKey": Array [
    "todos",
  ],
  "signal": AbortSignal {},
}

    // 이렇게 query로 받아와서 사용한다.
    search:({queryKey})=>{
      const [_,query]=queryKey;
      return(
      fetch(
      ).then((res) => res.json())
    )

 

- 2) 사용자가 검색을 누르면 fetch function이 작동할 수 있게 할 것 인가 ? (그전까지는 비활성화 상태로만들기)

--> useQuery option에 enabled : false를 주어서 바로 실행이 안되게 한다음에 

  onSubmitEditing 를 통해서 query 값에 사용자가 입력하고 'search' 버튼을 누를때 refetch() 를 실행 시켜 useQuery를 동작시킨다. 

const Search=()=>{
  const [query,setQuery]=useState("");
  const {isLoaindg,data,refetch}=useQuery(["todos",query],fetch function,
  {
    enabled:false
  });

  const onChangeText=(text)=>{setQuery(text)};
  
  
  const onSubmit = ()=>{
    if (query===""){
      return;
    }
    // refetch로 enabled option으로 되어있는 것을 실행해주는 역활을 한다.
    refetch();
  }

    return(
      <Container>
        <SearchBar placeholder='' placeholderTextColor="grey"
         returnKeyType="search" onChangeText={onChangeText} onSubmitEditing={onSubmit}></SearchBar>
      </Container>
    );

};

export default Search;