[React] React Query

React Query란?

 

기존 미들웨어의 한계

• 보일러 플레이트 : 코드량이 너무 많다.
• 규격화 문제 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아니다.(규격화 문제)

리액트 쿼리의 강점 : 너무 쉽고, 책임에서 자유롭다

• 보일러 플레이트 만들다가 오류날 일이 없다.
• 내가 만든 부분 아니기 때문에 잘못이 일어난들 내 잘못이 아니다.
• 사용방법이 기존 thunk 대비 너무 쉽고, 직관적이다.

 

주요 키워드

 

Query

 

어떤 데이터에 대한 요청을 의미한다.

 

axios의 경우 get 요청과 비슷하다.

const response = await axios.get(’http://localhost:3000/todos’)

 

 

Mutation

 

어떤 데이터를 변경하는 것.

 

어떤 데이터라 함은, 데이터 그룹 그 자체를 의미한다.

바꾼다는 것은 추가, 수정, 삭제를 의미.

CRUD 중, CUD에 해당한다. (Create, Update, Delete)

 

axios의 경우 post, put, patch, delete 요청과 비슷하다.

axios.post(’http://localhost:3000/todos’., newTodo);
axios.patch(http://localhost:3000/todos/${id}, {isDone: true});

 

 

Query Invalidation

 

위에서 보았던 Query를 invalidation. 즉, 무효화 시킨다는 의미

 

 

무효화 시킨다라는 뜻

 

--> 기존에 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있다. 그렇기 때문에 ‘최신 상태가 아닐 수’ 있다.
그런 경우, 기존의 쿼리를 무효화 시킨 후 최신화 시켜야 한다.

이런 과정을 React Query에서는 알아서 해준다. 그 유용한 기능이 바로 **Query Invalidation**이다.