22일차 (react-query)

기존 미들웨어의 한계

1. 보일러 플레이트: 코드량이 많아짐

2. 규격화 문제: redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아님

 

리액트 쿼리의 강점

1. 보일러 플레이드 만들다가 오류 날 가능성 x

2. 쉽고 책임에서 자유로움

3. 사용방법이 쉬움

 

주요 키워드

1. Query: get 요청과 유사

2. Mutation: 어떤 데이터를 변경하는것(Create, Update, Delete)

3. Query Invalidation: 최신화 시키는 것

 

---

사용방법(데이터 조회)

 

1. 프로젝트를 아우르는 App.jsx에서 쿼리 설정을 해줘야 함

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <Router />
    </QueryClientProvider>
  );
};

 

2. API관련 파일들 다 모아놓기 (axios관련)  => src/api/파일명.js

// todos 조회
const getTodos = async () => {
  const response = await axios.get(`${process.env.REACT_APP_SERVER_URL}/todos`);
  return response.data;
};

 

3. 데이터를 불러와야 하는 컴포넌트에서 아래와 같이 작성하면 isLoading, isError, data를 한 번에 불러올 수 있음

const { isLoading, isError, data } = useQuery("todos", getTodos);

// 이 때 아래를 넣어주지 않으면 로딩하다가 에러 발생
if (isLoading) {
    return <div>로딩중...</div>;
  }

 

사용방법(데이터 추가)

 

1. API 설정

// 여기서 newTodo가 추가되는 항목임
const addTodo = async (newTodo) => {
  await axios.post(`${process.env.REACT_APP_SERVER_URL}/todos`, newTodo);
};

 

2. 추가를 진행하는 컴포넌트에서 useQueryClient 

const queryClient = useQueryClient();
  const mutation = useMutation(addTodo, {
    onSuccess: () => {
      // todos는 todoList.jsx에서 useQuery의 이름이며, 이 값을 넣어줘야 query-invalidation이 됨
      // todos라는 이름을 가진 쿼리를 갱신한다는 의미
	// 쿼리 키라고 하며, 전체 맥락에서 쿼리를 공유하는 방법으로 쓰임
      queryClient.invalidateQueries("todos");
      console.log("sucess");
    },
  });

 

3. 추가하는 핸들러에서 디스패치 대신에 mutate 사용

// dispatch(addTodo(newTodo)); xxxx

mutation.mutate(newTodo);