ReactQuery (useQuery)
useQuery라는 hook을 배웠는데 이거 정말 신세계다!
ReactQuery란 애플리케이션의 데이터를 관리하고 동기화하는 데 사용되는 상태 관리 라이브러리다.
const { isLoading, data } = useQuery<CoinInterface[]>("allCoins", fetchCoin);useQuery(고유식별자, fetcher function) 의 형식으로 사용한다.
* 여기서 fetcher function은 반드시 promise를 반환해야 함
* useQuery의 제네릭(<여기>)에는 반환될 data의 타입을 적어 주면 됨
ReactQuery 반환객체 주요 속성
isLoading: 데이터 fetch 중이면 true, 아니면 false
-> 자동으로 가져오는 동안 true, 가져오면 false를 반환
data: fetcher 함수가 성공적으로 반환한 데이터
-> 자동으로 data에 치환됨!!!
isError: fetcher 함수가 실패했을 때 true
error: fetcher 함수가 반환한 에러 객체
isFetching: 백그라운드에서 데이터를 다시 가져오는 중인지 나타냄
useState 로 loading, setLoading 상태를 만들어 조건부 렌더링하던 지난 프로젝트의 나날들이 떠오르고...
fetcher function을 별도의 파일로 분리하여 관리해 주니까 코드가 훨씬 깔끔하고 가독성이 좋다.
const { isLoading: infoLoading, data: infoData } = useQuery<InfoData>(
["info", coinId],
() => fetchCoinInfo(coinId)
);
const { isLoading: tickersLoading, data: tickersData } = useQuery<PriceData>(
["tickers", coinId],
() => fetchCoinTickers(coinId)
);
이런 식으로 useQuery를 두 번 이상 사용할 경우, isLoading 과 data 처럼 정해진 이름이 중복되면 구분할 수 없으므로 콜론(:)을 사용해 이름을 지정해 준다.
첫 번째 인자는 고유 식별자여야 하므로 array를 사용하여 온전한 고유식별자를 구현하는 것을 권장한다.
그리고 useQuery의 제일 큰 장점 중 하나는, 가져온 데이터를 파괴하지 않고 캐시에 저장해 둠! 이것도 무려 자동!
data가 캐시에 이미 저장되어 있으면(useQuery에서 첫 번째 인자로 지정해 둔 고유식별값이 캐시에 이미 있으면) fetcher function에 접근하지 않고 캐시에서 데이터를 가져온다. 공부할수록 react는 정말 멋진 라이브러리라는 생각이 든다... 감동 (ㅠㅠ)