24.06.14 TIL

 

TanStack Query? React Query?

TanStack Query는 원래 React Query로 알려졌지만, 더 많은 프레임워크를 지원하도록 확장되면서 이름이 변경되었다. 

TanStack은 이제 React Query뿐만 아니라 Vue Query, Svelte Query 등 다른 프레임워크를 위한 Query 라이브러리도 포함하는 더 큰 프로젝트를 의미한다.

 

TanStack Query 란 ?

서버 상태 관리와 비동기 데이터 페칭, 캐싱, 동기화를 단순화하기 위해 설계된 라이브러리 이다.

 

Redux, TanStack Query  각 특징과 차이점 ?

TanStack Query 특징
1. 데이터 페칭 및 캐싱 : 서버에서 데이터를 비동기적으로 가져오고, 이를 자동으로 캐싱하여 성능을 최적화
2. 자동 리페칭 : 데이터가 변경되거나 필요할 때 자동으로 다시 데이터를 가져온다.
3. 백그라운드 동기화 : 사용자가 페이지를 다시 방문하거나 탭을 활성화할 때 데이터를 자동으로 동기화한다.
4. 쿼리와 뮤테이션 : 데이터를 읽기 위한 쿼리(Query)와 데이터를 변경하기 위한 뮤테이션(Mutation)을 간편하게 처리할수있다.
5. 오프라인 지원 : 네트워크 연결이 끊어졌을 때도 데이터를 관리하고, 연결이 복구되면 데이터를 동기화한다.

Redux 특징

1. 전역 상태 관리 : 애플리케이션의 모든 상태를 중앙 집중식으로 관리한다.

2. 액션과 리듀서 : 상태 변화를 일으키는 액션(Action)과 상태 변화를 처리하는 리듀서(Reducer)를 사용한다.

3. 단방향 데이터 흐름 : 데이터가 한 방향으로만 흐르도록 하여 상태 관리를 예측 가능하게 한다.

4. 미들웨어 : Redux Thunk, Redux Saga 등을 사용하여 비동기 로직을 처리할 수 있다.

 

TanStack Query와 Redux의 차이점

1. 관리하는 상태의 종류

TanStack Query: 주로 서버 상태(데이터 페칭, 캐싱, 동기화)를 관리

Redux: 주로 클라이언트 상태(애플리케이션의 전역 상태)를 관리

2. 상태 변경 방식

TanStack Query: 쿼리와 뮤테이션을 통해 데이터를 관리

Redux: 액션과 리듀서를 통해 상태 변화를 관리

3. 데이터 페칭 및 캐싱

TanStack Query: 데이터 페칭과 캐싱이 기본적으로 제공되며 자동으로 동기화

Redux: 기본적으로 데이터 페칭과 캐싱 기능이 없으며, 이를 구현하기 위해 추가적인 코드와 미들웨어가 필요

 

Redux, TanStack Query 주로 언제 사용 ?

Redux

1. 복잡한 전역 상태 관리 : 여러 컴포넌트 간에 공유해야 하는 복잡한 상태를 관리할 때 유용
2. 비동기 로직이 많은 경우 : 비동기 로직을 중앙에서 관리하고 싶을 때 Redux Thunk나 Redux Saga를 사용하여 비동기 액션을 처리할 수 있다.
3. 애플리케이션의 상태를 예측 가능하게 관리해야 할 때 : 상태 변화가 예측 가능하고 디버깅이 쉬운 애플리케이션을 원할 때 

TanStack Query 

1. 서버에서 데이터를 자주 가져와야 할 때 :
REST API나 GraphQL을 통해 데이터를 자주 가져와야 하는 애플리케이션에 적합
2. 데이터 페칭, 캐싱, 동기화를 간편하게 처리하고 싶을 때 :
데이터 페칭과 캐싱을 자동으로 처리하여 성능을 최적화하고 싶을 때 유용
3. 자동 리페칭 및 백그라운드 동기화가 필요한 경우 :
사용자가 페이지를 다시 방문하거나 네트워크 상태에 따라 데이터를 자동으로 동기화하고 싶을 때 사용

 

📌 요약

 

• Redux : 애플리케이션 전역 상태 관리를 위한 도구로, 복잡한 상태 관리와 비동기 로직을 처리하는 데 유용
• TanStack Query : 서버 상태 관리와 비동기 데이터 페칭을 간편하게 처리할 수 있도록 설계된 도구로, 데이터 페칭, 캐싱, 동기화에 특화되어있다.

이 두 도구는 서로 보완적인 역할을 할 수 있으며, 애플리케이션의 필요에 따라 함께 사용할 수도 있다.

( ex) 전역 상태 관리를 위해 Redux를 사용, 서버 데이터 관리를 위해 TanStack Query를 사용하는 방식 )

 

 

---

 

✔️ TanStack Query의 주요 메서드와 주의점

1. useQuery

데이터를 가져오기 위한 주요 훅, 서버에서 데이터를 비동기적으로 가져오고 캐싱한다.

const { data, error, isLoading } = useQuery(['user'], fetchUser);

[ 주의 ]

쿼리 키: 쿼리 키는 고유해야 하며, 쿼리 데이터를 식별하는 데 사용된다. 고유하지 않으면 데이터 충돌이 발생

데이터 페칭 함수: 데이터 페칭 함수는 비동기 함수여야 하며, 항상 데이터를 반환해야 한다.

 

2. useMutation

서버에서 데이터를 변경하기 위한 훅, POST, PUT, DELETE 요청 등에 사용된다.

const mutation = useMutation(newData => axios.post('/api/data', newData));

[ 주의 ]

데이터 일관성: 뮤테이션이 성공한 후 로컬 캐시를 업데이트하여 데이터 일관성을 유지해야 한다.

낙관적 업데이트: 낙관적 업데이트를 사용하여 UI 응답성을 높일 수 있지만, 실패 시 롤백 로직을 반드시 구현해야 한다.

 

3. QueryClient

쿼리 클라이언트는 쿼리 캐시를 관리하고 쿼리를 실행

const queryClient = new QueryClient(); <QueryClientProvider client={queryClient}> <App /> </QueryClientProvider>​

[ 주의 ]

전역 인스턴스: 애플리케이션 전체에서 하나의 QueryClient 인스턴스를 사용해야 한다.

  const mutationDelete = useMutation({
    mutationFn: deleteExpense,
    onSuccess: () => {
      navigate("/");
      queryClient.invalidateQueries(["expenses"]);
    },
  });

▲ 캐시 관리: 쿼리 클라이언트를 통해 캐시된 데이터를 직접 관리할 수 있다. 필요에 따라 캐시를 무효화하거나 재페칭할 수 있다.

                   ( .invalidateQueries ) : 기존 캐싱된 데이터를 무효화하여 재페칭 

 

4. useQueryClient

QueryClient 인스턴스에 접근할 수 있는 훅입니다. 캐시된 데이터를 직접 조작하거나 쿼리를 무효화할 때 사용

const queryClient = useQueryClient(); queryClient.invalidateQueries(['user']);

[ 주의 ]

캐시 무효화: 쿼리 키를 사용하여 정확한 데이터를 무효화하거나 재페칭하도록 해야 한다.

캐시 직접 수정: 캐시를 직접 수정할 때는 데이터 일관성을 유지하는 것이 중요하다.

 

5. QueryClientProvider

QueryClient를 React 컴포넌트 트리에 주입하는 프로바이더

const queryClient = new QueryClient(); <QueryClientProvider client={queryClient}> <App /> </QueryClientProvider>

[ 주의 ]

루트 컴포넌트: QueryClientProvider는 애플리케이션의 루트 컴포넌트 주위에 배치해야 한다.

클라이언트 인스턴스: 여러 인스턴스를 만들지 않도록 주의해야 한다.

 

 

6. invalidateQueries

특정 쿼리 키에 해당하는 쿼리를 무효화(invalidate)하여 다시 데이터를 페칭하도록 트리거하는 기능의 메서드이며

캐시된 데이터를 수동으로 무효화하고 업데이트할 필요가 있을 때 유용

const handleButtonClick = () => {
    // 'user' 쿼리를 무효화하여 다시 데이터를 페칭하도록 트리거
    queryClient.invalidateQueries(['user']);
  };​

[ 주의 ]

1. 정확한 쿼리 키 사용 :

invalidateQueries 메서드에서 사용하는 쿼리 키는 정확해야 한다. 올바른 쿼리 키를 사용하지 않으면 원하는 쿼리가 무효화되지 않을 수 있다.

2. 무효화 범위 지정 :

특정 쿼리 키를 지정하지 않으면, 모든 쿼리를 무효화할 수 있다. 따라서 가능한 한 특정 쿼리 키를 사용하여 무효화 범위를 좁히는 것이 좋다.

3. 서버 상태 동기화 :

서버 상태가 변경된 후 클라이언트에서 이를 반영하기 위해 invalidateQueries를 사용하여 데이터를 다시 페칭하는 것이 중요하다.

( 데이터가 성공적으로 업데이트된 후 이를 다른 컴포넌트에서도 최신 상태로 유지하려면 해당 쿼리를 무효화한다. )

 

TanStack Query는 서버 상태 관리를 단순화하는 데 매우 유용한 도구이며 이를 통해 데이터 페칭, 캐싱, 동기화를 보다 효율적으로 관리할 수 있다.

---

export const login = async ({ id, password }) => {
  try {
    const response = await axios.post(AUTH_API_HOST + "/login?expiresIn=30m", {
      id: id,
      password: password,
    });
    localStorage.setItem("accessToken", response.data.accessToken);
    return response.data;
  } catch (error) {
    console.log(error?.response?.data?.message);
    alert(error?.response?.data?.message);
  }
};

 

api에서 accessToken 저장하고 요청/인증 등 처리할때 "accessToken"오타,, 문자열 부분이여서 에러줄도 안생겨 어이없게 실행안되니 오타주의 ..ㅎ