React Query

• 일반 Redux -> Redux Toolkit -> Redux thunk 를 넘어 드디어 React Query까지.. 지금까지 배웠던 것은 React Query를 정확히 이해하고 왜 써야하는 지 그 이유를 알기 위한 서사였다. (아 물론 100% 이해했다는 뜻은 아니지만 ㅎㅎ..)

기존 미들웨어의 한계

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

React Query의 강점

• 보일러 플레이트 만들다가 오류날 일이 없다.
• 내가 만든 부분이 아니기 때문에 책임에서 자유롭다.
• 사용방법이 기존 thunk 대비 쉽고 직관적이다.

주요 키워드

1. Query

• 어떤 데이터에 대한 요청을 의미하며, axios의 경우 get 요청과 비슷하다.

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

2. Mutation

• 어떤 데이터를 변경하는 것으로, CRUD 중 C(Create)U(Update)D(Delete)에 해당한다.
• axios의 경우 post, put, patch, delete 요청과 비슷하다.

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

3. Query Invalidation

• 위에서 보았던 Query를 Invalidation한다. 즉, 무효화 시킨다는 의미이다.
  -> 기존에 가져온 Query는 서버데이터이기 때문에 언제든지 변경이 가능하다. 이럴 때 최신 상태가 아닐 수 있는데, 그런 경우 기존의 쿼리를 무효화 시킨 후 최신화 시켜야한다. 이런 과정을 React Query에서 알아서 해주는데, 그 유용한 기능이 Query Invalidation이다.