2월 22일 여정 45일차이다.
사용방법이 기존 thunk 대비 너무 쉽고, 직관적이다.
오늘은 이전에 복잡하게 사용했던 Redux Tunk가 아닌 보다 간단하고 직관적인 React Query를 보고자한다.
오늘의 Today I Learned
리덕스 thunk는 미들웨어로써 사용을 해왔다. 그러나
Redux-thunk, Redux-Saga 등에는 다음과 같은 문제가 있다.
- 보일러 플레이트 : 코드량이 너무 많아요.
- 규격화 문제 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아니다.(규격화 문제)
그러다보니 이점을 해결하고자 리액트 쿼리가 나왔다.
그럼 리액트 쿼리의 장점은 무엇일까?
- 보일러 플레이트 만들다가 오류날 일이 없다.
- 내가 만든 부분 아니기 때문에 잘못이 일어난들 내 잘못이 아니다.
- 사용방법이 기존 thunk 대비 너무 쉽고, 직관적이다.
그럼 리액트 쿼리에서 쓰이는 주요 키워드를 보자.
1. Query
axios의 get 요청과 비슷하다.
const response = await axios.get(’http://localhost:3000/todos’)2. 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});3. Query Invalidation
기존에 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있다. 그렇기 때문에 ‘최신 상태가 아닐 수’ 있다. 그런 경우, 기존의 쿼리를 무효화 시킨 후 최신화 시켜야 한다.
이런 과정을 React Query에서는 알아서 해준다. 그 유용한 기능이 바로 Query Invalidation이다.
그럼 실제 코드를 보자.
App.jsx
const queryClient = new QueryClient();
const App = () => {
return (
<QueryClientProvider client={queryClient}>
<Router />;
</QueryClientProvider>
);
};먼저 이렇게 QueryClientProvider로 감싸준다.
api > todos.js
import axios from "axios";
// 모든 todos를 가져오는 api
const getTodos = async () => {
const response = await axios.get("http://localhost:3000/todos");
return response;
};
export { getTodos };get으로 유저의 정보를 받아온다.
Todolist.jsx
function TodoList({ isActive }) {
const { isLoading, isError, data } = useQuery("todos", getTodos);
if (isLoading) {
return <p>로딩중입니다....!</p>;
}
if (isError) {
return <p>오류가 발생하였습니다...!</p>;
}
이 부분이 React Query가 가지고 있는 큰 장점이라 할 수 있다. Thunk를 이용하면 isLoading, isError등을 개발자가 직접 만들어줬어야 했다. state에서 말이다.
React Query는 서버 데이터를 위한 표준을 이미 제시하고 있기 때문에 개발자들 마다의 특성에 따라 바뀔 염려가 없다.
추가기능 구현
api > todos.js
const addTodo = async (newTodo) => {
await axios.post(`${SERVER_URI}/todos`, newTodo);
};api에서 axios로 데이터를 보낸다.
const queryClient = new QueryClient();
const mutation = useMutation(addTodo, {
onSuccess: () => {
// Invalidate and refresh
// 이렇게 하면, todos라는 이름으로 만들었던 query를
// invalidate 할 수 있다.
queryClient.invalidateQueries("todos");
},
});[invalidate의 과정]
Input.jsx에서 값 입력으로 인해 서버 데이터가 변경됨
→ onSuccess가 일어나면 기존의 Query인 “todos”는 무효화
→ 새로운 데이터를 가져와서 “todos”를 최신화시킴
→ TodoList.jsx를 갱신함
마지막으로
피곤하지만 리액트 쿼리는 너무 좋다...
