🏝️TanStack Query로 복잡한 서버 상태 관리하기

웹 애플리케이션을 개발하다 보면, 상태 관리가 가장 중요한 과제 중 하나라는 것을 느끼게 됩니다. 여기서 말하는 "상태"란 애플리케이션이 현재 어떤 정보를 가지고 있으며, 그 정보가 어떻게 변화하는지를 의미하는데요, 이는 크게 클라이언트 상태와 서버 상태로 나눌 수 있습니다.

클라이언트 상태는 브라우저 내에서 독립적으로 관리되는 데이터 입니다. 예를 들어, 사용자가 선택한 테마, 입력한 폼 데이터, 혹은 UI 컴포넌트의 현재 상태 같은 것들이 여기에 해당됩니다. 이러한 데이터는 주로 사용자 인터페이스와 관련된 정보를 담고 있기 때문에, 브라우저 안에서 관리하기 쉽습니다.

반면, 서버 상태는 클라이언트 외부, 즉 서버에서 가져와야 하는 데이터를 의미합니다. 여기에는 유저 목록, 상품 정보, 혹은 이전에 주고 받았던 채팅 메시지와 같은 데이터가 포함됩니다. 이 상태는 클라이언트와 서버가 서로 데이터를 주고받는 과정에서 주기적으로 동기화해야 하며, 항상 최신 상태를 유지하는 것이 중요합니다. 가령, 서버에서 상품 정보가 변경되었을 때, 이를 클라이언트에서 즉시 반영하지 못한다면 사용자에게 오래된 정보를 보여주는 문제가 발생할 수 있습니다.

서버 상태를 관리하기 위해 React에서는 주로 useState와 useEffect를 사용합니다. 아래는 이를 활용해 유저 데이터를 서버에서 가져오는 간단한 예시입니다.

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

위 코드는 단순하고 잘 작동하는 것처럼 보이지만, 실제로는 몇 가지 문제가 있습니다. 첫 번째로, 컴포넌트가 언마운트된 후 다시 마운트되면 데이터의 변화가 없을 지라도 매번 해당 데이터를 새로 요청합니다. 이렇게 동일한 데이터를 반복적으로 가져오게 되면 네트워크 리소스가 낭비되고, 애플리케이션의 성능에도 악영향을 미칠 수 있습니다.

또한, 서버에서 데이터가 업데이트 되었더라도 클라이언트 화면에 표시된 정보가 이를 반영하지 못할 가능성이 큽니다. 이를 해결하려면 데이터를 다시 가져오는 로직을 수동으로 작성해야 하지만, 이 과정에서 코드가 복잡해지고, 예상치 못한 버그를 유발할 수도 있습니다.

여기에 더해, 여러 컴포넌트가 동일한 데이터를 공유해야 하는 경우엔 문제가 더욱 복잡해집니다. 예를 들어, 유저 목록을 보여주는 컴포넌트와 유저 세부 정보를 표시하는 컴포넌트가 있다고 가정해보겠습니다. 이 두 컴포넌트가 각각 독립적으로 데이터를 요청한다면, 각기 다른 시점의 데이터를 표시하거나, 데이터가 동기화되지 않는 상황이 발생할 수 있습니다. 결국, "누가 최신 데이터인지"를 두고 컴포넌트 간에 혼란이 생길 수 있는 것이죠.

React의 기본 도구는 이러한 서버 상태 관리에서 여러 한계를 가지고 있습니다. 서버 상태는 클라이언트 상태와 달리 여러 컴포넌트에서 동시에 접근해야 하고, 지속적으로 최신 상태를 유지해야 하며, 중복된 요청이나 데이터 불일치를 방지해야 하기 때문입니다. 이러한 이유로, 단순히 useState와 useEffect를 사용하는 것만으로는 복잡한 서버 상태를 효과적으로 관리하기 어렵습니다.

이러한 문제를 해결하기 위해 등장한 것이 바로 TanStack Query입니다. TanStack Query는 서버 상태를 체계적으로 관리하며, 데이터를 효율적으로 캐싱하고, 자동으로 동기화하며, 중복된 요청을 방지하는 등 React의 기본 도구가 가지는 한계를 극복할 수 있도록 돕는 도구입니다. 이를 통해 개발자는 서버 상태 관리에 드는 복잡한 로직을 줄이고, 애플리케이션의 핵심 기능에 더 집중할 수 있게 됩니다.

TanStack Query와 핵심 개념

서버 상태를 관리하는 과정은 단순히 데이터를 요청하고 화면에 보여주는 작업이 아닙니다. 데이터를 요청하고 동기화하는 과정에서 중복된 요청이 발생하거나, 오래된 데이터가 표시되는 문제가 자주 나타나기 때문입니다. TanStack Query는 이러한 문제를 체계적으로 해결하며, 서버 상태 관리를 단순하고 효율적으로 만들어주는 도구입니다. React 애플리케이션에서 데이터를 요청하고 갱신하는 복잡한 로직을 대신 처리해주기 때문에, 개발자는 애플리케이션의 핵심 기능에 더 집중할 수 있습니다.

Query와 데이터의 체계적인 관리

TanStack Query는 데이터를 Query라는 독립적인 단위로 관리합니다👮 Query는 데이터를 요청하고, 가져온 데이터를 캐싱하며, 필요할 때 데이터를 갱신하는 역할을 합니다. 예를 들어, 유저 목록 데이터를 요청하는 Query와 특정 유저의 상세 정보를 요청하는 Query를 각각 독립적으로 구성할 수 있습니다. 이렇게 Query를 활용하면 데이터 요청과 관리를 체계적으로 분리할 수 있습니다.

Query는 단순히 데이터를 요청하는 것뿐만 아니라, Query Key 라는 고유 식별자를 통해 데이터를 구분하고 관리합니다. Query Key는 데이터를 식별하기 위한 이름표 역할을 하며, TanStack Query가 데이터를 추적하고 재사용할 수 있게 하는 핵심 요소입니다. 예를 들어, 유저 목록을 요청하려면 Query Key를 ["users"]로 설정할 수 있고, 특정 유저 데이터를 요청하려면 ["user", userId]와 같은 형식으로 설정할 수 있습니다. 이렇게 Query Key를 사용하면 어떤 데이터가 이미 요청되었는지 판단하고, 필요한 경우에만 새로 데이터를 요청할 수 있습니다.

staleTime과 gcTime의 적절한 설정

TanStack Query는 데이터를 효율적으로 관리하기 위해 staleTime과 gcTime 설정을 제공합니다. 이 설정을 적절히 조정하면 애플리케이션의 요구사항에 맞는 데이터 갱신 주기를 설정할 수 있습니다.

staleTime은 데이터가 여전히 유효하다고 간주되는 시간을 의미합니다. 받아온 데이터의 유통기한 같은 개념이죠 ⏱️ 예를 들어, 실시간 주식 가격처럼 자주 갱신이 필요한 데이터는 staleTime을 짧게 설정함으로써 항상 최신 상태를 유지할 수 있습니다. 반면, 자주 변경되지 않는 제품 정보 같은 데이터는 staleTime을 길게 설정한다면 불필요한 네트워크 요청을 줄일 수 있습니다. 이렇게 설정하면 네트워크 부하를 줄이면서도 필요한 시점에만 데이터를 갱신할 수 있습니다.

gcTime은 데이터가 참조되지 않을 때 캐시에 얼마나 오래 유지될지를 결정합니다. 사용자가 특정 페이지를 다시 방문할 가능성이 높은 경우, gcTime을 길게 설정하면 데이터를 재사용할 수 있습니다. 반면, 사용자가 데이터를 다시 참조할 가능성이 낮은 경우에는 gcTime을 짧게 설정해 메모리 사용량을 줄이는 것이 효율적입니다.

주식 거래 애플리케이션을 예로 들면, 실시간 가격 정보는 사용자가 지속적으로 확인해야 하므로 staleTime을 짧게 설정하고 gcTime을 상대적으로 길게 설정합니다. 반면, 쇼핑몰에서 제품 정보는 자주 변경되지 않기 때문에 staleTime과 gcTime을 더 길게 설정해도 문제가 없습니다. 이렇게 각 데이터의 특성과 사용 빈도에 맞게 설정을 조정하면, 성능 최적화와 사용자 경험을 모두 향상시킬 수 있습니다.

Mutation과 데이터 변경

TanStack Query는 데이터를 단순히 가져오는 것뿐만 아니라, 서버 데이터를 변경하는 작업도 지원합니다. 데이터를 추가하거나 수정하는 작업은 Mutation이라고 불립니다. Mutation은 데이터를 변경한 뒤, 관련된 Query를 자동으로 무효화하고 새 데이터를 요청하여 화면에 최신 상태를 반영합니다. 예를 들어, 새로운 유저를 추가한 뒤 유저 목록을 자동으로 갱신하도록 설정할 수 있습니다. 이를 통해 서버와 클라이언트 간 데이터 동기화를 간소화하고, 데이터의 일관성을 유지할 수 있습니다.

이렇듯 TanStack Query는 기존의 useState와 useEffect로 데이터를 관리할 때 발생하던 문제를 체계적으로 해결합니다. 데이터를 가져오고, 캐싱하며, 자동으로 동기화하여 데이터 관리의 복잡성을 줄이고 성능을 최적화할 수 있도록 우리를 도와주는 친구죠 !

Query Invalidation과 데이터 동기화

서버 상태를 관리할 때 중요한 점은 데이터의 동기화입니다. 데이터가 변경된 후에도 클라이언트와 서버 간의 상태가 항상 일치해야 하며, 이를 수동으로 처리하려면 많은 복잡한 로직이 필요합니다. TanStack Query는 이러한 동기화 문제를 해결하기 위해 Query Invalidation이라는 기능을 제공합니다. 이 기능을 활용하면 데이터를 최신 상태로 유지하면서도, 데이터 동기화 과정을 자동화할 수 있습니다.

Query Invalidation의 역할

Query Invalidation은 특정 데이터를 stale 상태로 전환하여, TanStack Query가 해당 데이터를 다시 가져오도록 유도하는 기능입니다. 데이터가 갱신되거나 삭제된 후, 캐싱된 데이터가 더 이상 신뢰할 수 없는 상태로 간주되면 Query Invalidation을 통해 데이터를 갱신할 수 있습니다. 예를 들어, 사용자가 새로운 항목을 추가하거나 기존 데이터를 수정한 뒤에도 관련 데이터를 사용하는 컴포넌트들이 최신 상태를 반영할 수 있도록 만듭니다.

Query Invalidation은 데이터를 stale 상태로 만드는 역할까지만 수행하고, 이를 통해 자동으로 데이터를 다시 가져오려면 추가적인 조건이 필요합니다. TanStack Query는 stale 상태가 된 Query를 다음과 같은 상황에서 자동으로 갱신합니다. 먼저, Query를 사용하는 컴포넌트가 다시 활성화되거나, 사용자가 브라우저 창으로 돌아올 때 refetchOnWindowFocus 옵션이 활성화되어 있다면 갱신이 이루어집니다. 또한, 네트워크 연결이 복구되었을 때 refetchOnReconnect 옵션이 설정되어 있다면 데이터를 새로 가져올 수 있습니다. 만약 이러한 조건이 충족되지 않는다면, refetchQueries를 호출하여 수동으로 데이터를 다시 가져오면 됩니다.

이처럼 TanStack Query는 Query Invalidation을 활용해 서버와 클라이언트 간 데이터 불일치 문제를 대폭 줄입니다. 개발자는 데이터를 다시 가져오는 복잡한 로직을 작성할 필요 없이, 설정을 통해 필요한 데이터 갱신 작업을 간단히 제어할 수 있습니다.

Mutation과 Invalidation의 연결

TanStack Query는 Mutation과 Query Invalidation을 긴밀히 연결하여 데이터 변경 후에도 최신 상태를 유지합니다. Mutation은 데이터를 서버에 저장하거나 수정하는 작업을 처리하며, 성공적으로 작업이 완료되면 관련된 Query를 자동으로 무효화합니다. 이렇게 하면 개발자가 데이터 갱신을 위해 추가적인 로직을 작성하지 않아도 됩니다.

예를 들어, 새로운 유저를 추가한 뒤 유저 목록 데이터를 다시 가져오고 싶다면, Mutation의 성공 콜백에서 invalidateQueries를 호출하여 해당 Query를 무효화할 수 있습니다.

const mutation = useMutation({
  mutationFn: addUser,
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ["users"] });
  },
});

const handleAddUser = async () => {
  await mutation.mutateAsync(newUserData);
};

위 코드는 새로운 유저를 추가한 후, ["users"]라는 Query Key를 가진 데이터를 stale 상태로 전환합니다. 이렇게 하면 유저 목록을 사용하는 모든 컴포넌트에서 자동으로 최신 데이터가 반영됩니다.

이러한 Query Invalidation은 데이터 동기화를 간소화할 뿐만 아니라, 네트워크 요청도 효율적으로 관리합니다. 변경된 데이터와 관련된 Query만 갱신하므로 불필요한 요청이 줄어들고, 애플리케이션의 성능이 개선됩니다. TanStack Query는 이를 통해 서버와 클라이언트 간 데이터 일관성을 유지하면서도, 네트워크 리소스를 효율적으로 활용할 수 있도록 합니다.

마무리 하며

TanStack Query는 단순히 데이터를 요청하고 갱신하는 도구를 넘어, 서버 상태 관리를 체계화하는 새로운 기준을 제시합니다. 데이터를 효율적으로 캐싱하고, 필요할 때만 갱신하며, 서버와 클라이언트 간의 데이터 동기화를 자동으로 처리합니다. 이를 통해 개발자는 손수 한땀 한땀 데이터 관리 로직을 구현하는 부담에서 벗어나, 애플리케이션의 핵심 기능 개발에 더 몰입할 수 있습니다. 또한, TanStack Query는 단순히 데이터를 가져오고 갱신하는 역할을 넘어, 서버 상태 관리를 데이터의 특성과 요구 사항에 맞춰 유연하게 설정할 수 있도록 만들어줍니다.

서버 상태 관리로 인한 어려움을 느끼고 있다면, TanStack Query를 도입하여 데이터를 더 간단하고 효율적으로 관리해 보세요. 개발 경험과 애플리케이션 성능, 두 마리의 토끼를 한 번에 잡을 수 있을거예요 🐰☘️