++ 리액트를 더 잘 쓰기 위한 정리 시리즈

React Query가 왜 필요할까?

리액트 쿼리를 사용하는 가장 큰 이유는 HTTP 비동기 요청과 빠른 UI 상태 업데이트 이 두 가지에 강점이 있기 때문이다.

클라이언트 위주의 상태관리와 커스텀 훅은 서버 데이터를 가져오는데 최적화되어 있지는 않다. 언제 데이터가 업데이트되어 fetch가 필요할지 모른다.
즉, 클라이언트 상태와 서버 상태는 다르다.

클라이언트에서 서버 데이터를 관리하더라도 캐싱, 성능, 가비지메모리 등 다양한 문제에 부딪힐 수 있다고 Tanstack Query 공식문서는 말하고 있다.

리액트 쿼리를 직접 사용하면서 장점을 알아보자!

React Qeury 장점

1. HTTP 요청 시 코드가 간결해짐

일반적으로 서버에 데이터를 가져오기 위해 비동기 요청을 할 경우 3가지 상태에 대해서 상태관리가 필요하다. 성공 응답, 에러, 로딩
아래 코드처럼 비동기 요청을 할 때, 비슷한 구조로 코드를 작성하게 된다.
물론 커스텀 훅을 만들어서 재사용할 수 있다.

const [data, setData] = useState();
const [error, setError] = useState();
const [isLoading, setIsLoading] = useState(false);

useEffect(() => {
  async function fetchEvents() {
    setIsLoading(true);
    const response = await fetch('http://localhost:3000/events');

    if (!response.ok) {
      const error = new Error('An error occurred while fetching the events');
      error.code = response.status;
      error.info = await response.json();
      throw error;
    }

    const { events } = await response.json();

    return events;
  }

  fetchEvents()
    .then((events) => {
    setData(events);
  })
    .catch((error) => {
    setError(error);
  })
    .finally(() => {
    setIsLoading(false);
  });
}, []);

리액트 쿼리를 사용하면 더 이상 클라이언트에서 상태를 관리할 필요가 없어진다.
아래 코드처럼 queryKey 와 queryFn 두 가지 프로퍼티를 사용해 간단히 서버로부터 데이터 상태를 받아올 수 있다.

const { data, isLoading, isError, error } = useQuery({
  queryKey: ["events"],
  queryFn: fetchData,
});

// fetchData 함수
export const fetchData = async () => {
  const response = await fetch("http://localhost:3000/events");

  if (!response.ok) {
    const error = new Error("An error occurred while fetching the events");
    error.code = response.status;
    error.info = await response.json();
    throw error;
  }

  const { events } = await response.json();

  return events;
};

2. Refetch와 캐싱 작업을 알아서 해줌

공식문서를 보면 다음 사항의 경우에 리액트 쿼리가 데이터를 다시 가져온다.

• New instances of the query mount
• The window is refocused
• The network is reconnected
• The query is optionally configured with a refetch interval

또한 쿼리를 관찰하는 역할을 하는 useQuery 또는 useInfiniteQuery 는 비활성화되면 자동으로 캐시에 저장되어 추후 사용될 수 있도록 한다.

이러한 기본적인 기능들은 옵션을 통해 값을 변경할 수도 있다.

3. 유저 친화적

리액트 쿼리는 지연된 쿼리 데이터를 유저에게 제공하는데, 다음 쿼리가 진행중일 경우 기존 쿼리의 데이터를 먼저 유저에게 보여준다. 이후 쿼리가 완료되면 변경된 데이터를 보여준다. 매번 쿼리를 요청할때마다 로딩 상태를 유저에게 보여주지 않고, 데이터를 지속적으로 보여줄 수 있는 것은 유저에게 좋은 경험을 준다.

또한 렌더링에 최적화되어 있다. 리액트 쿼리는 쿼리를 액세스하는 여러 필드를 추적하고 이 중 하나가 변경되는 경우에만 다시 렌더링을 한다. 필드가 여러개가 한번에 바뀌어도 업데이트를 일괄 처리하기 때문에 렌더링 횟수를 줄일 수 있다.

정리하며

아직 리액트 쿼리를 많이 사용해보지 않아서 전부 이해되진 않았지만, 서버 상태 관리와 클라이언트 상태 관리에 대한 여러 이점을 주는 것은 분명하다.
추후 리액트 쿼리에 대한 설명을 더 자세하게 적어야겠다.