[react-query] 검색 기능

 

 react-query엔 신기하고 재밌는 기능이 많은 것 같다.

일단 쿼리키를 의존성 배열로 줄 수 있다는 부분이 굉장히 신기하고! 헷갈리게 한다... 

 

 조회 api랑 검색 api가 따로 있고 그래야 되는 건진 모르겠지만 조회, 검색 쿼리를 따로 만들었다. 

 

const { data: searchData, refetch: searchRefetch } = useQuery<any>(
    ["searchInfo", type, searchWord],
    () =>
      searchInfo({
        page: 1,
        type: type,
        search: searchWord,
      }),
    {
      enabled: false,
    }
  );

페이지와 검색 타입(이름/번호) 서치 키워드를 인자로 받는다!

 

검색을 누를때만 refetch()를 시켜서 콜하기 위해서 enabled:false로 한다.

 

enabled: false를 하지 않으면 계속해서 조회가 된다. false로 해놨기 때문에 어떤 이벤트가 발생했을 때 useQuery에서 꺼내온 refetch를 실행해주면 된다!

 

searchWord에 따라서 고유한 쿼리키를 가져야 한다고 생각했으므로 의존성 배열 안에 넣어주었다. (이게 맞는진 모르겠음)

 

페이지는... 일단 1페이지로 하드코딩 해놨다. 

 ,, ,예전엔 하드코딩이란게 빈 화면에 아무것도 안보고 엄청 빡세게 코딩하는 걸 말하는 줄 알았었는데! ,,, 

 

 

지금 문제

 

1. 타입 : name, 검색어 이름을 치고 검색 버튼을 누르면 바로 안 뜬다. 한 번 더 누르면 그때서야 결과가 뜬다. 

 - setData로 검색된 내용을 갈아끼워주고 있는데 이게 한 박자 느린듯? 

2. 검색 목록이 나온 상태에서 다시 현 메뉴로 들어오면 필터링 되지 않은 기존의 데이터가 보여야 한다.(검색 전의 상태로!) 

3. 페이지가 1로 고정되어 있다. 페이지네이션도 필터링 안된 데이터수를 기준으로 보여준다.

 

 

 

 

 

1. 타입 : name, 검색어 이름을 치고 검색 버튼을 누르면 바로 안 뜬다. 한 번 더 누르면 그때서야 결과가 뜬다.

-> async, await !!!!!!!!!!

 

// 검색 버튼 누를 시
  const onClickSearch = async () => {
    await searchRefetch();
    setIsSearching(true);
  };
  
  // 
    useEffect(() => {
    if (!isSearching) {
      setScanData(필터링x 기존 데이터);
      setSearchWord("");
    } else {
      setScanData(필터링o 검색 데이터);
    }
  }, [isSearching]);

setIsSearching(true)가 될 때, 검색된 데이터를 다 받아오기 전에 비동기적으로 실행돼서 문제인 것 같아서 async랑 await를 붙여보니 잘 된다! 

 

 

2. 검색 목록이 나온 상태에서 다시 현 메뉴로 들어오면 필터링 되지 않은 기존의 데이터가 보여야 한다.(검색 전의 상태로!) 

검색한 상태에서 현 메뉴를 누르면 모든 데이터가 보여야한다.(새로고침처럼?) 

 

  const onClickTopMenu = (info: any) => {
    console.log("click ", info);
    setIsSearching(false);
    setOpenTopItems(info.key);
  };

isSearching이라는 Recoil 전역 스테이트를 만들어서 그걸 false로 만들어준다...ㅎ

그럼 검색 상태가 풀리긴 한다! isSearching이 false가 될 때 검색 input창도 value를 이용해 초기화해주면 오키,,,? 

 

 

 

3. 페이지가 1로 고정되어 있다. 페이지네이션도 필터링 안된 데이터수를 기준으로 보여준다.

먼저 조회와 검색 page 인자는 동일한 인자를 쓴다! 

page: page, 로 해놓았다. 

 

조회와 검색 데이터와 isSearching, setPage를 presenter로 내려줬다. 

그리고 presenter에 있는 페이지네이션에 setPage를 내리고,

count엔 isSearching의 상태에 따라 검색/전체 데이터의 길이를 갖게 했다!

<Paginations01
          count={
            props.isSearching
              ? props.검색데이터.length
              : props.전체데이터.length
          }
          refetch={props.refetch}
          setPage={props.setPage}
        />

 

 

 

+ 추가 오류 

타입 숫자로 검색할 땐 고유한 값이어서 백엔드에서 값을 보낼 때 객체 하나로만 왔다. 

타입 이름은 동명이인이 있을 수도 있으니 여러개의 객체가 배열에 담겨서 왔다! 

 

그래서 자꾸 map is not a function 이라고 떴나보다. 

 

그리고 숫자로 검색하는 건 고유한 번호라서 중복이 있을 수 없는데 내가 두 개 만들어놓은 게 있어서 검색할 때 오류가 뜬 것 같다 ! 

{result: 'failed', errtype: 'runtime exception', errmsg: 'query did not return a unique result: 2; nested ex…xception: query did not return a unique result: 2'}

 

 

onlyNumberFunc(event.domEvent.target.innerHTML);

 

  const regex = /[^0-9]/g;
  const result = number.replace(regex, "");

 

---

왜 데이터가 undefined인 형태로 들어오는지, 바뀌지 않는지 생각해보기

비동기/동기에 유의하기

 

 

useQuery 쿼리키에 대해 이해가 부족하다.

 

useQuery에서 status랑 remove 이용하기

 

input 창에 입력할 때 한 번 remove 하고 시작 

 

 

 

 

useQuery 쿼리키, remove 에 대해 공부하기!!!

 

 

 

 

+++++0920 추가

 

// 검색
  const {
    status: searchStatus,
    data: searchData,
    refetch: searchRefetch,
    remove: searchRemove,
  } = useQuery<any>(
    ["쿼리키", number, type, searchWord], 
    () =>
      searchscaninfo({
        page: page.page,
        number: number,
        type: type,
        search: searchWord,
      }),
    {
      refetchOnWindowFocus: false,
      enabled: false,
    }
  );

searchWord가 빠져있었는데 빠져있으니까 

이름 검색 -> 번호로 검색 -> 다른 목록 조회 -> 다시 돌아와서 번호로 검색하려고 타입변경 하면 아까 검색했던 데이터가 나오는 오류가 있었다.

 

일단 추가해서 해결은 됐는데 아직 쿼리키 확실히는 모르겠다... . . . . .ㅎ 

 

 

 

        page: page.page,
        radixnumber: Number(currentRadix.label),
        type: type,
        search: searchWord,

 

 

예뻐서!

 

 

 

참고 사이트

https://qcoding.tistory.com/12

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

 

 

참고 강의

https://www.udemy.com/course/react-query-react/

【한글자막】 React Query : React로 서버 상태 관리하기