[Next.js] React Query

React Query가 만들어진 이유와 React Query를 사용할 때 얻게 되는 이점에 대해 설명해달라는 기술면접 질문을 가지고 왔습니다. 이번에 이 질문에 대해서 어떻게 생각하고 이해하는지를 알기 위해서 React Query에 대한 설명과 장점에 대해서 이야기 해볼려고 합니다.

목차

• React Query란?
• React Query의 동기
• React Query의 장점
  • 간편한 데이터 관리
  • 상태 관리 및 오류 처리의 용이성
  • 사용자 경험 향상을 위한 기능 제공

React Query란?

React Query는 React 애플리케이션에서 비동기상태를 관리하는 라이브러리입니다. tanstack이라는 프로젝트에서 만들어진 오픈소스로, 현재 @tanstack/query 하위에 패키지로 관리되고 있습니다.

강력한 비동기상태관리를 위한 패키지라고 소개한다. 자바스크립트/타입스크립트에서 사용할 수 있고, 리액트에서 활용하기 쉬운 인터페이스도 제공한다.

React Query를 사용하면 API 요청의 상태를 더 간편하게 조회하고, 응답결과를 캐싱하고, 에러에 대응할 수 있습니다. React Query는 데이터의 상태를 추적하고, 렌더링을 최적화하는 기능을 제공합니다.

React Query의 동기

React 애플리케이션을 개발하면서 데이터를 가져오고 업데이트하는 등 복잡한 상태를 관리해야 할 때가 많습니다. 세상에 다양한 어플리케이션이 있는 만큼 다양한 문제가 생기죠.

• 사용자가 어떤 데이터를 수정,삭제를 요청했습니다. 언제 유저의 데이터를 업데이트해줘야 할 까요?
• 한 화면에서 여러 컴포넌트에서 같은 API요청이 사용되는데, 1번만 요청하고 결과를 공유해서 사용하고 싶다면 어떻게 할까요?
• 누군가 팔로우했다, 게임에 초대했다는 사실을 클라이언트가 어떻게 알 수 있을까요? 폴링은 어떤 주기로 어떻게 구현해야할까요?
• 사용자가 6시간만에 탭을 켰는데, 데이터가 업데이트가 안된다고 합니다. 언제나 새로고침 해줘야 할까요? 화면에 나타나는 데이터가 이미 ‘지난’ 정보라는 걸 어떻게 알고 업데이트해줄 수 있을까요?

하지만 React는 UI 렌더링을 위한 라이브러리로서, 이러한 데이터를 가져오거나 업데이트하는 일관된 방법을 제시하지 않습니다. 다른 ‘프레임워크’와 구별되는 특징이기도 하죠. React를 사용하는 개발자는 이런 ‘비동기 상태’관리 방식을 직접 구현해야 합니다. (앞서 예시로 든 4가지 문제는 대부분 React Query를 통해 비교적 용이하게 해결할 수 있고, 알기 쉽게 코드로 표현할 수 있습니다.)

React Query이전에는 Redux, MobX같은 상태관리 라이브러리들을 가지고 해결하고자했죠. 비동기 상태관리에 특화된 React Query보다는, 상태관리 전반을 위한 도구이기 때문에, 위에서 말한 세부적인 처리를 직접 구현해야 했죠.

개개인의 개발자들이 요구사항에 따라, 비슷하더라도 별도로 구현하게 되고, 이는 코드베이스 전체로 본다면, 일관성이 떨어뜨리기도 합니다. 그렇게 되면 의도치않은 버그를 일으키기 딱 좋은 상황이 벌어지죠.

• 서버에 요청해서 변화를 일으켰을 때, 클라이언트에 저장한 데이터를 최신화 하지않는 실수
• 무의미한 또는 과도한 API요청 / 메모이제이션
• side effect를 추적하기 힘들어서 부담스러움
• API요청 마다 서로 다른 추상화수준, 인터페이스

정리하면, 데이터 요청 및 상태 업데이트의 복잡성, 중복 코드의 증가, 오류 처리 등 문제를 낳게됩니다.

React Query는 이러한 문제를 해결하고자 등장했습니다. 이 패키지는 서버요청의 상태, 그리고 서버요청의 결과를 더욱 간편하게 사용할 수 있는 강력한 도구입니다. 그럼 이제 React Query의 장점들을 하나씩 알아보도록 하겠습니다.

React Query의 장점

React Query는 별도의 설정없이도 쉽게 사용할 수 있으며, 어플리케이션이 커지더라도 원하는 설정을 커스텀할 수 있습니다.

1. 간편한 데이터 관리

React Query는 API 요청과 데이터 캐싱, 상태 관리 등을 자동화하여 개발자들이 데이터를 쉽게 가져오고 업데이트할 수 있도록 도와줍니다. 캐싱이 자동으로 이루어지고, 옵션으로 설정가능하기 때문에, 잦은 요청을 줄이면서도, 필요한 만큼 자주 캐시를 최신화되도록 해서 사용자에게 최적화된 정보를 제공할 수 있습니다.

@tanstack/query 내에 패키지 중 하나인 React Query는 React를 위한 훅을 제공해줍니다. 개발자들은 직접 데이터 상태를 관리하기 위한 복잡한 훅을 작성하지 않아도 되고, 일관된 방식으로 쿼리할 수 있죠.

대표적으로 useQuery 와 useMutation 이 있습니다.

const {
    data, // queryFn 요청의 결과 데이터
    error, // queryFn 요청의 에러 발생 시, error 값
    refetch, // 명시적으로 query를 다시 실행하기위한 함수
    status // query호출의 상태를 표현함. "error","success","loading" 중 하나.
} = useQuery({
    queryKey : ['todo'],
    queryFn : fetchSomething,
    staleTime: 0, // 위 2번째 `data`를 stale 상태로 인식하기까지 시간 (fresh -> stale)로 변하면 refetch시 data가 업데이트될 수 있다.
    refetchInterval: false, // refecth 인터벌을 number, false, 함수 형태로 전달할 수 있다. polling을 구현하기 용이하다.
})

2. 상태 관리 및 오류 처리의 용이성

React Query는 데이터 상태를 추적하고 관리하는 데 도움을 줍니다. 데이터 요청 및 업데이트 중에 발생하는 오류를 처리하고, 로딩 상태 및 성공 또는 실패 상태를 쉽게 확인할 수 있습니다. 이는 개발자들이 에러 핸들링 및 데이터 상태를 효율적으로 관리할 수 있도록 돕습니다.

서버 상태를 관리할 때, 자주 사용되는 패턴이 추상화되어 있어서, 같은 코드를 짧게 표현할 수 있습니다. 예를 들면 쿼리 자체를 비활성화시킬 수 있는 enabled 나 onError onSuccess 같이 비동기작업(서버요청) 결과에 대해 대응하는 코드를 작성하기 용이합니다. 이 외에도 다양한 유용한 최적화 옵션을 제공합니다.

const query = useQuery({
  queryKey : ['todo'], // 쿼리의 키로서, 쿼리를 구분하는 역할을 합니다. 키가 다르면 다른 쿼리이니까, 키에 연결된 쿼리데이터도 별도로 관리됩니다.
  queryFn : fetchSomething, // 어떤 함수든 들어갈 수 있습니다. 비동기 함수라면, 비동기 작업 중에는 status가 loading이 됩니다.
  enabled : true, // 기본값으로 true입니다. 경우에 따라서, 옵션을 끌 수 있는데, 예를 들어 요청하는 데이터의 id가 주어지지 않았다면, 요청을 해도, 실패하니까 요청할 필요가 없겠죠
  onError : (error) => alert('에러입니다'), // queryFn의 결과가 에러인 경우에 호출될 콜백입니다.
  onSuccess: (data) => console.log(`성공 데이터:${data}`)// queryFn의 결과가 성공인 경우에 호출될 콜백입니다.
})

3. 사용자 경험 향상을 위한 기능 제공

대표적으로 다음과 같은 UX 개선에 도움이 되는 기능을 구현하기 쉽게 제공합니다.

• refetchOnWindowFocus : 브라우저 탭을 다시 띄웠을 때, (visibilitychange이벤트 시) 쿼리를 다시 호출해서 최신화합니다. 사용자는 새로고침하지 않고도, 자연스럽게 업데이트된 데이터를 접하게 됩니다.
• retry : 기본적으로 3회, 1초, 4초, 6초 간격으로 실패한 요청에 대해 다시 요청합니다. 사용자 환경에 따라, 실패할 수 있지만, 별도로 재시도하지 않아도 됩니다.
• Optimistic Update : 서버 데이터를 업데이트할 때, 요청이 성공한다고 (Optimisitic하게) 가정하고, 쿼리 데이터에 반영하는 패턴입니다. 실제로 요청이 실패하는 경우에는 롤백하기 용이한 방법 제공합니다. 덕분에 유저는 대부분의 성공케이스에 더 빠르게 변화를 볼 수 있습니다.

React Query에서 제공하는 이러한 기능들은, 자주 사용되거나, 일반적인 요구사항을 더 쉽게 구현할 수 있게 해주고, 개발자들이 핵심적인 비즈니스 로직에 집중할 수 있게끔 도와줍니다.

결론적으로, React Query는 데이터 요청, 상태 관리, 오류 처리 등의 작업을 간소화하여 개발자들이 더욱 효율적으로 애플리케이션을 개발할 수 있게 도와줍니다. 덕분에 현재 React 생태계에서, 그리고 제품개발에 있어서 분명 강력한 도구로 인정받고 있습니다. 공식문서를 참고하고 사용해보시면서 클라이언트에서의 비동기상태관리에 대해 더 잘 이해하실 수 있습니다.