[TIL] Day 47 React Thunk와 React Query의 차이

2023.12.08 금

 

React Thunk와 React Query는 둘 다 React에서 비동기 데이터를 다루기 위한 라이브러리이지만,

각각의 특징과 사용법에는 몇 가지 차이를 보인다.

어떤 차이점이 있고, 어떤 상황에 사용해야 적절한지 알아보자.

 

React Thunk

1. 상태 관리 라이브러리

- React Thunk는 주로 Redux와 함께 사용되는 상태 관리 라이브러리이다.
- Redux Thunk 미들웨어를 이용하여 비동기 작업을 처리한다.

2. Actions, Reducers
- Redux에서 Actions와 Reducers를 사용하여 상태를 변경하고 관리한다.
- 비동기 작업을 위한 Thunk 함수를 생성하여 사용한다.

3. 복잡성
- 복잡한 애플리케이션에서 상태의 흐름을 명시적으로 관리할 수 있다.
- 상태 변화에 대한 예측 가능성이 높아진다.

4. 코드 예제

// Redux Action
const fetchData = () => {
  return async (dispatch) => {
    dispatch({ type: "FETCH_DATA_REQUEST" });
    try {
      const response = await api.fetchData();
      dispatch({ type: "FETCH_DATA_SUCCESS", payload: response.data });
    } catch (error) {
      dispatch({ type: "FETCH_DATA_FAILURE", payload: error.message });
    }
  };
};

// Redux Reducer
const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCH_DATA_REQUEST":
      return { ...state, loading: true };
    case "FETCH_DATA_SUCCESS":
      return { ...state, loading: false, data: action.payload };
    case "FETCH_DATA_FAILURE":
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

 

React Query

1. 라이브러리 특화

- React Query는 React 애플리케이션에서 사용되는 데이터 쿼리와 관련된 라이브러리이다.
- 주로 RESTful API 호출 및 상태 관리를 담당한다.

 

2. Query, Mutation

- Query와 Mutation 컴포넌트를 사용하여 데이터를 가져오고 수정한다.
- Query 컴포넌트는 자동으로 캐싱 및 리프레싱을 처리한다.

 

3. 간결성

- 상태 관리를 위한 별도의 라이브러리가 필요하지 않다.
- 코드가 간결하며 컴포넌트의 로직을 단순화시킨다.

 

4. 코드 예제

import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await api.fetchData();
  return response.data;
};

const MyComponent = () => {
  const { data, isLoading, isError } = useQuery('data', fetchData);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error fetching data</div>;
  }

  return (
    <div>
      <h1>Data: {data}</h1>
    </div>
  );
};

 

결론

- React Thunk는 주로 복잡한 상태 관리 및 비동기 작업을 다루기 위한 Redux와 함께 사용된다.
- React Query는 간결하면서도 효과적인 데이터 쿼리를 제공하여 별도의 상태 관리 라이브러리 없이도 사용할 수 있다.
- 프로젝트의 규모 및 요구 사항에 따라 선택하여 사용할 수 있다.

 

 

 

---

하루를 마치며

Props Drilling → Context API → Redux → Redux ToolKit → Thunk → React Query → TanStack Query

정말 짧은 시간이 이렇게 많은 정보를 알게 되니까 완전히 내 것으로 만드는 데 시간이 걸리는 것 같다.

전체적인 개념을 읽어봐서 흐름은 알지만, 머릿속에서 짬뽕이 되는 느낌이다.

원하는 적재적소에 효율적으로 기능을 활용하기 위해서는 계속 복습하고 내 것으로 만드는 시간이 필요한 것 같다.

앞으로 중간중간 놓쳤던 부분과 React Query, TanStack Query와 같이 비슷하지만 다른 버전의 차이점 등 조금 더 디테일하게 살펴보려고 한다.

 

 

 

오늘의 한 줄
내 머릿속에 코딩하자