-
Notifications
You must be signed in to change notification settings - Fork 1
React‐Query 기본 개념
Znero edited this page Dec 1, 2024
·
1 revision
결국 클라이언트에서 서버상태를 다룰때 가장 큰 문제는 클라이언트 자체에서 소요하고 있지 않다는 것입니다.
소유하지 않은 데이터를 다루는 것은 몹시 까다로운 일이죠. 이 데이터가 최신의 데이터인지 아닌지 알기 위해서는 서버에 주기적으로 요청을 해서 확인해야하기 때문입니다.
하지만 리렌더링이 잦아지면 사용자 경험(UX)에 부정적인 영향을 줄 수 있습니다. 이에 따라 클라이언트에서 서버 상태를 관리할 때 가장 중요하게 생각해야할 것은 다음과 같습니다.
최대한 신선한 데이터를 유지하면서도 사용자 경험을 좋게 유지하기!
얼핏 보면 균형을 잡기 어려운 문제 같아보입니다. 저는 이에 리액트 쿼리가 어떤 방식으로 위의 균형을 잡아나갔는지 공부해보았습니다.
서버 상태의 기본 단위 :
쿼리&뮤테이션
서버 상태의 단위
- 각각의 쿼리는 서버에서 데이터를 요청하고, 그 데이터 상태를 캐시하고 관리
- 일반적으로 API 단위로 분리합니다.
- 고유한 쿼리 키(Query Key)로 데이터를 식별합니다.
- 캐시를 관리하기 위한 목적
- 해시값을 생성해 데이터를 매핑
퀴리키 / 서브키
-
쿼리 키(Query Key): 데이터를 구별하는 고유한 키
- 예를 들어,
['todos']는 할 일 목록 전체를 의미합니다.
- 예를 들어,
-
서브 키(Sub-key): 쿼리 키의 하위 키로, 데이터를 더 세부적으로 구별하기 위해 사용
- 예를 들어,
['todos', { id: 1 }]는 특정id를 가진 할 일 항목을 의미합니다.
- 예를 들어,
쿼리 함수(Query Function)
- 서버로부터 데이터를 가져오고 프로미스를 반환
- 성공적으로 데이터를 반환하면 resolve, 실패하면 error
서버에서 데이터를 변경할 때 사용하는 기능
- 데이터를 생성, 수정, 삭제하는 요청을 처리
- 서버와 클라이언트 상태를 동기화하기 위해 쿼리 무효화(Query Invalidations)를 활용
리액트 쿼리는 다음과 같은 기능을 통해 최대한 신선한 데이터를 유지하면서도 사용자 경험을 좋게 유지하고 있습니다.
-
캐싱(Caching): 데이터를 캐시에 저장해 효율적인 관리와 신선도 유지를 보장합니다. -
자동 갱신(Automatic Refetching): 설정된 시간 간격이나 특정 조건에서 자동으로 데이터를 새로 고쳐 최신 상태를 유지합니다. -
배경 데이터 업데이트(Background Data Sync): 데이터가 변경될 때 백그라운드에서 실시간으로 동기화하여 최신 상태를 유지합니다.
-
낙관적 업데이트(Optimistic Updates): 서버 응답을 기다리지 않고 UI에 예상되는 상태를 반영해 리렌더링을 최소화합니다. -
쿼리 취소(Query Cancellation): 불필요한 쿼리를 취소하여 과도한 리렌더링을 줄입니다. -
DevTools: 개발자가 쿼리 상태와 캐시를 모니터링하고, 리렌더링을 최소화하는 데 도움을 줍니다.
-
에러 처리 및 재시도(Error Handling and Retry): 네트워크 오류 시 자동 재시도하여 통신의 신뢰성을 높입니다. -
쿼리 무효화(Query Invalidations): 변경된 데이터를 반영하기 위해 관련 쿼리를 무효화하고 새 데이터를 가져옵니다. 이를 통해 서버와 클라이언트 상태의 일관성을 유지합니다. -
배경 데이터 업데이트(Background Data Sync): 네트워크 재연결 등 상황에서 백그라운드 동기화로 데이터의 일관성을 유지합니다.
- https://react-query.kro.kr/docs/getting-started
- https://www.youtube.com/watch?v=n-ddI9Lt7Xs
- https://velog.io/@rookieand/Server-State%EB%8A%94-%EB%AD%90%EA%B3%A0-React-Query%EB%8A%94-%EC%99%9C-%EC%93%B0%EB%8A%94%EA%B0%80
- https://www.timegambit.com/blog/digging/react-query/01
- https://www.notion.so/TKDodo-s-React-query-a5017c6ae8fd42f9856e23ac0fffa045?pvs=21