React Query와 친해지기

zena·2023년 3월 23일

Front-end

목록 보기

1/9

프로젝트(hey, cake)에 리액트 쿼리를 도입하면서도 친해지기보다는 무작정 쓴 거 같아서 확실한 이해를 위해 공부하고 정리하고자 한다.

React application 자체가 데이터를 패칭해오거나 업데이트하는 옵션을 제공하지 않기 때문에 개발자 스스로 고유한 방법을 구축해야 하며, 기존 상태 관리 라이브러리는 클라이언트 상태 작업에 적합하다.

서버의 값을 클라이언트에 가져오거나 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 해주는 라이브러리

비동기 또는 서버 상태 작업을 위한 라이브러리라는 뜻. (근데, 편리함을 더한)

1. '서버'에서 주기적으로 fetch하기 때문에 데이터를 전역에서 사용할 수 있다.

: 이게 머선 말인가 하면,
클라이언트 사이드에서 명시적으로 fetch하는 게 아니라!! 서버에서 하기 때문에!!
쿼리를 고유하게 식별할 수 있는 쿼리 키를 다른 위치에서 호출해도 동일한 데이터를 호출할 수 있어서 편함 그잡채 라는 뜻이다.

2. 캐싱을 효율적으로 관리해준다.

: 쿼리 키를 통해 캐싱이 이루어지고, staleTime과 cacheTime을 통해 업데이트의 빈도를 조절할 수 있다.

3. 같은 데이터에 대한 여러 번의 요청이 있을 시 중복을 제거한다.

4. 백그라운드에서 알아서 오래된 데이터를 업데이트해준다.

5. Devtool을 제공하기 때문에 원활한 디버깅이 가능하다.

당연히 단점도 존재한다. ㅋㅋㅋ

1. 훅의 형태로 컴포넌트 내부에서 사용되기 때문에 자칫하면 컴포넌트 종속적인 코드가 될 수 있다.

2. 프로젝트의 규모에 따라서 라이브러리의 컨텍스트 자체를 유지하는 비용이 효용보다 커질 수 있다.

~~사실 두 번째 이유의 경우에는 다양한 규모의 프로젝트를 수행해본 적이 없어서 확 와닿지 않는 것 같당.. ㅎㅎ~~

(이해를 위한 시간 소요 과정일 뿐, 실제 값과는 관련이 없습니다!)

쿼리 인스턴스가 마운트되면, 데이터 패칭과 캐싱이 이루어진다.
성공적으로 캐싱되는 경우 데이터의 상태는 fresh하며, 이는 staleTime동안 유지된다.
statleTime 만큼 시간이 경과하면, 쿼리 인스턴스는 언마운트되고, 데이터의 상태는 stale로 변경되어 cacheTime동안 유지된다.

이후 과정에서 2갈래로 나뉘게 되는데!!
(1) cacheTime이 종료될 때까지 쿼리 인스턴스가 마운트되지 않는다면, 결국 캐시는 가비지 콜렉터로 수집된다.
(2) cacheTime이 종료되기 전에 쿼리 인스턴스가 마운트되면, 새롭게 데이터를 패치하고 캐싱이 진행되는 동안 stale 상태의 데이터를 보여주고, 이후 성공적으로 캐싱되는 경우 데이터는 fesh한 상태를 가지고 반복하게 된다.

되게 매력적인 라이브러리였는데, 내가 참맛을 몰랐던 것 같다 ㅎㅎㅋ
리팩토링하면서 제대로 사용해봐야지

🐤 FE developer 🎧