[TIL] 원티드 프리온보딩_16일차_220518

오늘은 react-query공부 ❕

---

react-query

• react-query를 사용하는 이유는 아래와 같다

  1. Server와 Client 사이 비동기 로직들을 쉽게 다룰 수 있다.
  2. 캐싱, 동기화, 업데이트가 쉽게 이루어진다.

1. 설치

npm install react-query

2. QueryClientProvider

• react-query사용을 위해 최상단에 감싸준다.

import { QueryClient, QueryClientProvider } from 'react-query'
...

const queryClient = new QueryClient();

...
<QueryClientProvider client={queryClient}>
 <ReactQueryDevtools />
     <Provider store={store}> 
         <RecoilRoot>
            <BrowserRouter>
              <Routes />
            </BrowserRouter>
        </RecoilRoot>
	</Provider>
</QueryClientProvider>

3. useQuery

import { useQuery } from 'react-query'
...
const { data, isLoading, error } = useQuery(uniqueKey, queryFn, options)

uniqueKey

• 해당 key를 기반으로 데이터 캐싱을 관리하며, string 또는 배열로 지정할 수 있다.

useQuery('key', ...)	// string
useQuery(['key], ...)	// 배열

queryFn

• 비동기 함수(api 호출 함수)를 넣어준다.

useQuery(['key', value], () => {
	fethchFunc(value)	// api불러오는 함수
}) 

useQuery('key', fetchFunc())

options

• enabled: query가 자동으로 실행되지 않게 설정하는 것이다

useQuery(
	['key', value],
    () => fethchFunc(value),	
    {
    	enabled: !!value // value값이 있을 때만 쿼리 요청을 한다.
    }
) 

• staleTime: 데이터가 fresh상태로 유지되는 시간이며, 해당 시간이 지나면 stale상태가 된다.

useQuery(
	['key', value],
    () => fethchFunc(value),	
    {
    	enabled: !!value,
        staleTime: 6 * 10 * 1000	//시간 설정
    }
) 

• refetchOnWindowFocus: 사용자가 사용하는 윈도우가 다른 곳을 갔다가 다시 화면으로 돌아오면 이 함수를 재실행하며, 그 재실행 여부를 설정하는 옵션이다.
• default값은 true이다.

useQuery(
	['key', value],
    () => fethchFunc(value),	
    {
    	enabled: !!value,
        staleTime: 6 * 10 * 1000,
        refetchOnWindowFocus: false
    }
) 

• onSuccess: 쿼리 실행 시 실행되는 함수이며 매개변수 data는 쿼리 성공시 넘어오는 response값이다.

const { data } = useQuery(
	['key', value],
    () => fethchFunc(value),	
    {
    	enabled: !!value,
        staleTime: 6 * 10 * 1000,
        refetchOnWindowFocus: false,
        onSuccess: data => {
        	console.log(data) //여기~
        },
    }
) 

• onError: 쿼리 실행 후 실패시 실행되는 함수이다.

const { data } = useQuery(
	['key', value],
    () => fethchFunc(value),	
    {
    	enabled: !!value,
        staleTime: 6 * 10 * 1000,
        refetchOnWindowFocus: false,
        onSuccess: data => {
        	console.log(data) 
        },
        onError: e => {
        	console.log(e) // 여기~
        }
    }
) 

• 더 다양한 option은 공식문서 참고🙂

---

마무리..

오늘은 검색창 UI, cors해결, 디바운싱, useQuery로 api호출, 입력한 질환명과 일치하는 부분만 볼드처리 까지 완료했다. 내일 팀 레포 구조 잡고 합치는 과정을 할 예정이다..! 난 아직 퍼지 문자열은 못했지만 팀원분들과 해결해 나가면 될거같다..! 내일도 화이팅이다.🔥