Tanstack Query 의 철학

Powerful asynchronous state management for TS/JS, React, Solid, Vue, Svelte and Angular

1. 지저분한 상태 관리
2. 수동 리패칭
3. 비동기 스파게티 코드

Tanstack Query 의 특징

DECLARATIVE & AUTOMATIC

💡 과정을 표현하는 절차형이 아니라, 원하는 결과를 표현하는 선언형 패러다임과 더불어 상태 관리에 필요한 각종 부수작업들을 알아서 처리해줍니다.

SIMPLE & FAMILIAR

💡 비동기를 처리할 수 있는 최신 JS 문법에 잘 어우러지고, 무겁고 복잡한 설정 코드를 작성할 필요가 없으므로 코드 표현이 간결해집니다.

EXTENSIBLE

💡 격리된 블랙박스로 인해 다른 영역에 영향을 끼치지 않으므로 모듈성이 좋으며, 비동기 상태 관리를 위한 여러가지 세부 설정이 가능해서 다양한 경우에 맞춰 유연하게 사용할 수 있습니다.

그 외 특징들

Tanstack Query의 동기

TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.

1. 당신이 통제할 수 없는 원격에서 존재합니다.
2. 패칭과 업데이트를 위해서는 비동기 API가 필요합니다.
3. 공동 소유로 인해, 다른 사람에 의해 암시적으로 변경될 수 있습니다.
4. 조심하지 않으면 잠재적으로 오래된 데이터가 되기 십상입니다.

1. 캐싱
2. 요청 최적화 (동일한 요청이 동시다발적으로 발생하는 경우라던지)
3. 오래된 데이터를 백그라운드에서 업데이트
4. 데이터가 언제 낡아지는지 판단하기
5. 데이터 갱신을 최대한 빠르게 반영하기
6. 페이지네이션 및 레이지 로딩과 같은 성능 최적화
7. 메모리 관리와 가비지 컬렉팅
8. 구조적 공유를 통해 쿼리를 메모이징

1. 복잡하고 오해하기 쉬운 코드들을 간단한 몇줄의 코드로 대체할 수 있어 코드가 간결해집니다.
2. 유지보수성을 높여주고, 새로운 서버 상태를 클라이언트 상태와 연결할 때 걱정을 하지 않아도 됩니다.
3. 사용자로 하여금 어플리케이션이 더욱 빠르다고 느끼게 해주며, 더 반응성이 좋아집니다.
4. 대역폭을 절약하고 메모리 성능을 향상시킬 가능성을 제공합니다.

React와의 호환성

훅의 형태로 기능을 제공

Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있습니다.

컴포넌트 구조에 맞춰짐

스스로 상태를 관리하는 캡슐화된 컴포넌트를 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요.

// 여기서는 글 목록만!
function PostList() {
	const { data: postList } = useQuery({
	  queryKey: ['post'],
	  queryFn: fetchPostList,
	});
}

// 여기서는 글만!
function Post(props) {
	const { id, img } = props;
	const { data: post } = useQuery({
	  queryKey: ['Post', id],
	  queryFn: fetchPost,
	});
}

React의 Suspense 와 함께 사용이 가능

function useBaseQuery(...) {
  // Handle suspense
  if (shouldSuspend(defaultedOptions, result)) {
    throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary)
  }
}

구조적 공유

❓ <a href="https://tanstack.com/query/latest/docs/framework/react/guides/render-optimizations#structural-sharing">구조적 공유</a>란? 낡은 서버 상태와 새로운 서버 상태를 비교할 때, 이전 상태를 최대한 많이 유지하려고 하는 전략입니다. JSON 형태로 직렬화 가능한 데이터에 대해, 변경이 없는 부분은 얕은 복사를 통해 레퍼런스를 유지하여 리렌더링을 방지합니다.

Context API와의 통합

🚨 QueryClient 는 참조-안전하게 사용하길 권장합니다. 가장 좋은 방법은 App 외부에 쿼리 클라이언트 인스턴스를 생성하는 것입니다. (<a href="https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable">참고</a>)

간단하게 쓰기 쉽지만 잘 쓰긴 쉽지 않음 (개인적인 생각)

Deep Dive

❗ 공식 문서에 나와있는 예제는 여기서 설명하지 않도록 하겠습니다.

1. 쿼리 키를 대하는 자세

Treat the query key like a dependency array

• 의존성 배열이 바뀌면 훅이 동작하는 것 처럼, 쿼리 키가 바뀌면 리패치 함수가 불립니다.
• 로컬 상태에 의존하는 쿼리 함수에 대해, 둘을 동기화해줍니다. 마치 useEffect 내부의 로직이 의존성 배열의 상태와 동기화되는 것 처럼요.

2. initialData를 이용해 매끄럽게 화면 바꾸기

type State = 'all' | 'open' | 'done';
type Todo = {
  id: number
  state: State
};
type Todos = ReadonlyArray<Todo>;

const fetchTodos = async (state: State): Promise<Todos> => {
  const response = await axios.get(`todos/${state}`)
  return response.data
};

const useTodosQuery = (state: State) =>
  useQuery({
    queryKey: ['todos', state],
    queryFn: () => fetchTodos(state),
    initialData: () => {
      const allTodos = queryClient.getQueryData<Todos>([
        'todos',
        'all',
      ])
      const filteredData =
        allTodos?.filter((todo) => todo.state === state) ?? []

      return filteredData.length > 0 ? filteredData : undefined
    },
  });

3. 서버 상태와 클라이언트 상태를 분리하라

    const App = () => {
      const { data } = useQuery({
        queryKey: ['key'],
        queryFn,
        staleTime: Infinity,
      })

      return data ? <MyForm initialData={data} /> : null
    }

    const MyForm = ({ initialData }) => {
      const [data, setData] = React.useState(initialData)
      ...
    }

4. 쿼리 캐시를 로컬 상태 매니저로 사용하지 마라

🚨 추가로, setQueryData 를 사용하는 경우 쿼리 키가 반드시 정확히 일치해야 합니다. (<a href="https://tkdodo.eu/blog/react-query-fa-qs#1-query-keys-are-not-matching">참고</a>)

5. 단순한 래핑 함수라도 유용할 수 있다

// 2번에 나온 예제 코드
const useTodosQuery = (state: State) =>
  useQuery({
    queryKey: ['todos', state],
    queryFn: () => fetchTodos(state),
  });

• 데이터 패칭 로직을 UI와 분리할 수 있습니다.
• 쿼리를 다루는 로직들을 하나의 파일에서 관리할 수 있습니다.
• 변경이 필요할 때, 수고가 덜 듭니다.

6. 서버 상태를 변형하기

// 패치 함수 내에서 서버 상태를 변형하는 경우
const fetchTodos = async (): Promise<Todos> => {
  const response = await axios.get('todos')
  const data: Todos = response.data

  return data.map((todo) => todo.name.toUpperCase())
};

const useTodosQuery = () =>
  useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  });

// select 옵션을 이용해 서버 상태를 변형하는 경우
const useTodosQuery = (select) =>
  useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    select,
  });

const useTodosCount = () => useTodosQuery((data) => data.length);
const useTodo = (id) => useTodosQuery((data) => data.find((todo) => todo.id === id));

7. 극한으로 리렌더링 최적화하기

💡 저자는 “불필요한 리렌더링” 보다, “필요한 리렌더링을 놓치는 것”을 더 경계라하고 조언합니다.