안녕하세요, 단테입니다.
오늘은 리엑트 쿼리 라이브러리에 대해 알아보겠습니다.

잠깐, 다 읽기는 귀찮고 목소리로 듣고 싶다면?

https://www.youtube.com/watch?v=0aujqvo920g

react query

리엑트 쿼리는 서버에서 가져온 데이터를 웹 브라우저 앱에서 사용하기 쉽게 도와주는 기술입니다.

서버는 클라이언트에게 데이터베이스에 있는 정보를 전달해주는 역할을 하는데요, 여기서 서버는 api 서버, 클라이언트는 웹 브라우저에서 실행되는 우리가 작성한 리엑트 앱을 의미합니다.

데이터베이스에서 가져온 데이터를 클라이언트에서 보여주기 위해 우리는 ajax를 이용하는데요, 이 때 서버에서 가져오는 데이터를 서버의 상태 라고 이야기 합니다.

상태라고 하면 클라이언트에서만 사용하는 용어인줄 알았는데요, 서버에도 상태가 있나요?

네, 모든 앱은 상태 값을 가지고 있습니다.

server state

server / client state를 가지고 있는 어플리케이션의 아키텍쳐 구조

서버는 특정 시점에 클라이언트의 요청에 대해 데이터 베이스에서 유저 정보를 가져와 서버의 상태 값을 만들어냅니다. 데이터 베이스에 있는 값을 그대로 클라이언트에게 전달 할 수도 있고, 요청에 담긴 특정 값을 이용해 정보를 가공 해서 메모리에 들고 있습니다.

그리고 이 정보를 클라이언트에게 전달해줍니다.

client state

client state는 크게 두가지로 나눌 수 있습니다.

• client에서 자체적으로 만드는 state (최초 데이터의 발생지가 클라이언트)
• server에서 전달받은 값으로 만다는 state (최초 데이터의 발생지가 서버)

리엑트 개발자가 사용하는 상태 관리 툴은 참 다양하죠?

external state 로는 리덕스 , 몹엑스, 저스탠드, 조타이, 리코일 등등..
internal state로는 context api, useState가 있죠.

첫번째인 클라이언트가 자체적으로 만드는 state는 대개 UI를 담당하는 부분으로 모달이 열리고 닫았는지, 어떤 버튼이 클릭되었는지, 지금 창이 리사이징 되고 있는지에 대한 메타 정보를 담은 상태값입니다.

두번째는 server state -> client state로 가져오는 부분에 대한 내용입니다.

리엑트는 서버의 상태 값을 받아오는데 정해진 모범 답안이라는 것이 없습니다.

Out of the box, React applications do not come with an opinionated way of fetching or updating data from your components so developers end up building their own ways of fetching data. - tanstack.com

컴포넌트의 생명 주기를 파악한 후 적절한 시점에 ajax 호출을 하고 서버에서 데이터를 받아오죠.
그리고 useState를 사용할 경우 데이터를 불러와 setState호출을 통해 응답 당시의 server state를 component state로 wrapping 합니다.

useEffect(() => {
 customFetch("...").then(setState)
},[]);

이렇게 클라이언트 앱은 server state와 client state에 대한 로직 처리를 나누어 선언해주어야 합니다.

react query가 해결 해주는 문제

간편한 server state 수급 방식

앱이 간단하다면 useState와 contextAPI만 사용하더라도 대부분의 client state를 다룰 수 있습니다. 하지만 복잡도가 올라가고 성능 향상에 대한 필요성이 생기는 시점이 예상된다면, 이미 잘 만들어진 바퀴인 상태 관리 도구를 선택하는게 가장 합리적인 선택이 될지도 모릅니다.

지금처럼 상태 관리 툴이 다양하지 않았을 당시만 해도 redux,mobx 두 가지가 상태 관리 도구의 주류 메인 스트림이었습니다. 그리고 서버 상태 값을 받아오기 위해

• redux는 thunk, saga, observable과 같은 개념을 차용했고
• mobx는 자체적으로 클래스나 함수를 만들어 async await을 통해 데이터를 가져오고, 이를 미리 선언한 observable한 필드에 초기화하여 사용해야 했습니다.

이것이 리엑트를 처음 배우는 사람들에게 있어 작지 않은 진입 장벽이 되었습니다.
특히 saga의 generator 문법은 js에 익숙하지 않은 개발자들에게는 큰 부담감으로 다가왔습니다.

react query는 hook 기반의 로직들로 되어있어 해당 훅을 사용하는 컴포넌트에서 상태 값의 변경을 간편하게 파악하여 리렌더링을 유발하게 해줍니다.

캐시

react query를 사용하기 전까지 state라는 용어는 암묵적으로 client의 state를 가르켰습니다. react query가 server state라는 개념을 만든 것이 아니라
client state만 신경쓰기에도 프론트엔드 개발자가 해줘야할 작업들이 많았던 것인데요,
만약 10초 뒤에 앱에서 표현하는 데이터가 더 이상 유효하지 않은 낡은 데이터라고 한다면 (주식이나 코인 거래소를 생각해보세요) 클라이언트에서는 polling방식으로 주기적으로 데이터를 받아오거나 (setInterval) 실시간성이 중요한 데이터라면 웹소켓을 통해 서버의 상태 값이 변경되었을 때 서버에게 통지받아야 합니다. 웹 소켓을 사용하려면 api서버에 추가 작업을 해줘야겠죠?

그 뿐만이 아닙니다. A 페이지의 특정 컴포넌트에서 불러온 데이터를 페이지 전환하여 B페이지에서 재사용하기 위해서라면, A, B 페이지에서는 state store에 해당 데이터가 이미 존재하는지에 대한 로직이 각기 들어가 있어야 하고(재호출 방지) , 해당 데이터의 유효성에 대한 로직을 추가로 작성해줘야 합니다.(유저가 탭을 이동했다가 다시 돌아왔을 때, 혹은 최초 접속한지 몇 초 지난 이후에는 데이터가 만료되었다고 판단하여 리렌더링 하는 로직을 추가로 작성).

리엑트 쿼리는 데이터의 캐시 처리를 간편하게 할 수 있는 인터페이스를 제공합니다.

• 몇 초 이후에는 데이터가 유효하지 않은 것으로 간주하고 데이터를 다시 불러온다.
• 데이터에 변경점이 있는 경우에만 리렌더링을 유발한다.
• 유저가 탭을 이동했다가 다시 돌아왔을 때 데이터를 다시 불러온다.
• 데이터를 다시 호출할때 응답이 오기 전까지는 이전 데이터를 계속 보여준다. 필요에 따라서는 로딩바와 같은 대안 UI를 보여주기 위해 loading state를 기본적으로 제공한다.

fetch api를 사용하여 데이터를 불러올 때 에러처리를 추가적으로 해줘야 한다는 불편함을 axios가 해결해주듯이,

클라이언트와 서버의 상태 값을 일치시켜줘야 하는 요구사항에서 부가적으로 생길 수 있는 로직들을 리엑트 쿼리의 api와 인터페이스로 간단하게 해결할 수 있도록 도와주는 것입니다.

react query 인기

리엑트 쿼리의 인기는 꾸준히 늘고 있습니다.
이렇게 우상향 곡선을 그리는 라이브러리는 프론트엔드 개발자로서 장기적으로 사용하지 않더라도
한번쯤 경험해볼 이유가 충분합니다.

개인적 우려

최근 프론트엔드 개발을 시작하시는 분들의 기술스택으로 기본적인 ajax 호출을 건너뛰고 바로 react query로 시작하시는 분들이 많은 것 같습니다. 취업을 위해 단기간 동안의 포트폴리오 생성을 위해 현업에서 많이쓰이는 최신 트렌드 기술로 개발 공부를 시작하시는 것입니다.

모든 기술은 기존의 어떤 특정한 문제를 해결하기 위해 만들어지고 개선되어 왔습니다.
이러한 이해가 선행되지 않고 꾸역꾸역 약을 삼키듯 api와 사용법 위주의 공부로 시작하는 것은

변화하는 개발환경 생태계에 유연하게 대처하는 뿌리를 기르는데 적절하지 않은 공부법인 것 같습니다.

좋다고 하는 기술이면 어떤 점 때문에 좋다고 하는지, 왜 기존 방식이 문제점인지에 대한 호기심으로 시작한다면 자연스럽게 기존의 방식들이 완전히 레거시가 되기전에 해당 사항을 경험해볼 수 있는 좋은 동기부여가 될 것이라 생각합니다.

오늘은 리엑트 쿼리의 기본 개념에 대해 알아보았습니다.
공식문서 및, 같이 읽으면 좋은 블로그가 있어 공유드리며 글을 맺습니다.

공식문서: https://tanstack.com/query/v4/docs/overview
tkdodo 블로그: https://tkdodo.eu/blog/

감사합니다.

cf) 많은 분들이 글을 읽어주고 계십니다.
혹시 추가로 알고 싶은 내용이나 다뤘으면 하는 주제는 댓글에 남겨주세요.
좋은하루되세요!