2023.03.13) 항해 36일차 (2-React Query)

리액트 쿼리......  생각보다 이 친구가 날 괴롭혔다...

썽크를 해서 가볍게 할 줄 알았던 나 반성해....

결국 이 내용을 이해하기 위해 내가 전에 만들었던 투두리스트 파일을

뜯어가며 새로 고쳐보며 이해하였다.

결국 강의에 나오지 않은 부분도 완성하기 성공했다ㅡㅜㅜㅜ

너무 감격스러운 것 ㅠㅠㅠㅠㅠ

요 몇 주 심각히 힘들었는데 보상받은 기분이라 너무 좋았다!

 

1) React Query

① 리액트 쿼리란

❶ 기존 미들웨어의 한계

우리는 다른 서버와의 API 통신과 비동기 데이터 관리를 위해

Redux-thunk, Redux-Saga 등 미들웨어를 채택해서 사용할 수 있다.

하지만 다음과 같은 문제가 있습니다.

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

 

❷ 리액트 쿼리의 강점

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

②주요 키워드

❶ Query

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

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

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

❷ Mutation

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

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

바꾼다는 것은 추가, 수정, 삭제를 의미해요. CRUD 중, CUD에 해당한다. (Create, Update, Delete)

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

ex) axios.post(’http://localhost:3000/todos’., newTodo);

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

❸ Query Invalidation

Query를 invalidation. 즉, 무효화 시킨다는 의미이다.

기존에 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있기에 최신 상태가 아닐 수 있다.

그런 경우, 기존의 쿼리를 무효화 시킨 후 최신화 시켜야 하는데 이런 과정을 React Query에서는 알아서 해준다.

그 유용한 기능이 바로 Query Invalidation이다.

 

 

뿌듯!!!!