231220 TIL

chillakilla·2023년 12월 21일

React-Query

리액트 쿼리란?

Fetching, Caching, 서버 데이터와의 동기화를 지원해주는 라이브러리

기존 미들웨어의 한계
1. 보일러 플레이트 : 코드량이 너무 많아짐.
2. 규격화 문제 : Redux는 본래 비동기 데이터 관리를 위한 전문 라이브러리가 아님.

리액트 쿼리의 강점?

보일러 플레이트 만들다가 오류가 발생할 일이 없다.

사용방법이 기존 Redux-thunk 대비 너무 쉽고 직관적이다.

주요 키워드

Query
어떤 데이터에 대한 요청을 의미.
ex) axios로 비교하자면 get요청과 흡사함.

const response = await axios get('http://~~~')

Mutation
어떤 데이터를 변경하는 것.
어떤 데이터라는 것은 데이터 그룹 그 자체를 의미.
바꾼다는 것은 추가, 수정, 삭제, 즉 CRUD에서 CUD(Create, Update, Delete)에 해당.
Query invalidation
위에서 언급한 Query를 invalidation, 무효화 시킨다는 의미.
헌데 무효화 시킨다는 것은 무슨 의미일까?

기존에 가져온 Query는 서버의 데이터이기 때문에 언제든지 변경이 일어날 수 있다.
그 말은 즉 데이터의 상태가 최신 상태가 아닐 수 있다는 뜻이다.
그렇기 때문에 최신화를 하기 위해 기존의 Query를 무효화 시킨 후에 새로이 업데이트 하는 것.

useQuery

1. useQuery hook 의 사용 방법

<script>
import { useQuery } from 'react-query';
import { fetchTodoList } from '../api/fetchTodoList';

function App() {
	const info = useQuery('todos', fetchTodoList);
}
</script>

2. useQuery의 인자

a. 첫번째 인자, Query Keys라고 부를 수 있는 todos

Query keys 는 refetching 하는 데에 쓰임.
캐싱(Caching)을 처리하는 데에도 쓰임.
앱 전체 맥락에서 이 쿼리를 공유하는 방법으로도 쓰임.
(어느 컴포넌트에 뿌려져 있어도 같은 key면 쿼리 및 데이터를 보장)

잠깐 Query Keys에 대해...
QK는 위의 예제처럼 한 단어일 수도 있고, 배열의 형태일 수도 있고, nested 객체일 수도 있다.
key라는 말이 의미하듯, 모든 QK는 Unique! 해야한다.

<script>
const query1 = useQuery('qk', api); // unique
const query2 = useQuery('qk2', api); // not unique
const query3 = useQuery('qk2', api); // not unique
</script>

단어 한 개로 이루어진 QK

useQuery('todos', ...)

위의 예제는 내부적으로 다음과 같이 해석할 수 있다.

queryKey === ['todos']

배열 형태의 QK

<script>
// ID가 5인 todo 아이템 1개
useQuery(['todo', 5], ...)
// queryKey === ['todo', 5]

// ID가 5인 todo 아이템 1개인데, preview 속성은 true
useQuery(['todo', 5, { preview: true }], ...)
// queryKey === ['todo', 5, { preview: true }]

// todolist 전체인데, type은 done
useQuery(['todos', { type: 'done' }], ...)
// queryKey === ['todos', { type: 'done' }]
</script>