프로젝트 준비: React Query

프로젝트를 1주 앞둔 현재, 지난 프로젝트에서 발생한 문제를 사전에 예방하고 더 나은 프로젝트 경험을 가져가려고 준비하고 있다.

지난 프로젝트에서 크게 변수로 작용한 것 중 하나가 비동기 로직 문제였다. 나는 서버에서 받아오는 데이터를 요청하는 비동기 로직을, 해당 데이터가 필요한 컴포넌트 내에서 바로 호출해서 상태값으로 저장했다.

그러나, 한 구간에서 비동기 요청을 너무 많이 사용했고, 서버에서 받아와 저장한 상태값이 서로 연관성을 크게 가졌기 때문에, 여러 문제가 발생했다.

• 첫째로, 비동기 요청을 통해 가져온 데이터 결과를 상태값으로 저장하고, 다음 비동기 POST 요청에서 params로 넘겨야 했는데, 해당 값이 저장되기 전에 다음 요청 로직이 실행 되어서 빈 값을 대신 넣어 보내는 문제가 발생했다.
• 각 페이지 컴포넌트 마다, 서버에서 받아온 데이터를 저장한 상태값을 저장했기 때문에 해당 값이 어디에 있는지 나중에 파악하기 힘든 문제도 발생했다.
• 마지막으로, 해당 값은 서버에서 받아온 후, 최신 값인지 보장하기 힘들었고, 데이터를 받아오는 도중인지 확인하기 위한 loading state, 에러 발생을 확인하기 위한 error state를 따로 useState 훅으로 관리해서 복잡성이 높아졌다.

위와 같은 문제는 특히 개발 이후에, 디버깅 및 유지 보수를 하는 과정에서 골칫덩어리로 다가왔고, 다음 프로젝트에서 같은 문제를 만나지 않기 위해 이에 대한 해결책을 찾아야 했다.

그렇게 찾은 해결책 중 하나가 React Query 라이브러리였다. 아래의 내용부터는 React Query가 무엇인지, 그리고 왜 필요한 지에 대해 정리하였다.

React Query는 무엇인가?

React Query는 간단하게 말해서 data fetching을 위한 React 라이브러리라고 할 수 있다.

왜 React Query는 등장했는가?

1. React Query가 UI 라이브러리인 만큼, Data Fetching을 위한 정해진 패턴 혹은 가이드라인이 따로 없었다.
2. 기본적으로 useEffect 훅 안에 비동기 데이터 요청 함수를 작성하여 데이터를 불러오고, useState 훅을 통해 컴포넌트의 상태값을 저장하는 방식을 썼다 (loading, error, 결과 데이터등이 저장하는 값이다)
3. 받아온 데이터가 앱 전역에서 필요하다면, 상태 관리 라이브러리를 따로 사용하였다. (Context, Redux 등)
4. 그러나, 위의 상태관리 라이브러리는 client state를 관리하는 데에는 적합했지만 (화면 상에 변화를 담당하는 state)
5. server state를 관리하는 데에는 적합하지 않았다. (비동기적으로 받아오는 서버 데이터)

Client State vs Server State

Client State

• 앱의 메모리 상에서 존재하며, 동기적으로 접근 혹은 수정이 가능한 state

Server State

• 클라이언트 밖에 존재하며, 받아오거나 수정 시에는 비동기 API 통신이 필요한 state (항상 최신 값을 보장해야 한다.)
• 따라서 외부와 공유되는 상태값이다. 그러므로, 모르는 사이 타인에 의해 변경될 수도 있다.
• 외부에 리모트 하게 존재하는 데이터와 최신화되지 않을 가능성 또한 있다.
• 데이터를 캐싱해야 하거나, 같은 데이터를 얻기 위해 여러번 요청을 하거나, 오래된 데이터를 새로 업데이트, 혹은 성능 최적화를 하려면 여러 문제가 따랐다.

⇒ 위와 같은 server state를 쉽게 관리하기 위해, React Query 라이브러리가 등장하였다.