상태관리 라이브러리 (React-Query)

김재즈·2023년 10월 22일

React-Query

React-query는 서버 데이터를 관리하고 사용할 때 굉장히 유용한 라이브러리인 것 같다.

공부를 해본 결과,
Fetching, Caching, 동기화에 초점이 맞춰져있어서 다른 상태관리 라이브러리와 비교했을 때, 서버 데이터 관리에 용이하다고 생각이 들었다.

그럼 위 기능들이 어떻게 서버 데이터 관리에 도움을 주는지 알아보쟈

데이터 캐싱.

처음엔 나도 무슨말인가 싶었다.
약간 해킹할 때 사용할만한 단어선택이 아닌가

데이터의 복사본을 저장하여 재사용에 용이함.
반복적인 비동기 데이터를 호출 방지한다.

즉, 자주 바뀌는 데이터를 서버에서 반복해서 불러오지 않기 위해 현재 상태의 데이터를 복사해두어 사용하는 것이다.

반복적인 비동기 데이터를 호출 방지하게 되어 서버 부하가 줄고 최적화가 되는 것이지요.

???: 선생님 데이터가 바뀌면 사용자는 최신 데이터를 못보잖아요 이게 뭐야 돌려줘요!!

맞다. 현재 불러온 기존 데이터 (stale data) 가 최신 데이터 (fresh data) 가 아닐 수 있잖아?
실제 데이터가 변경된 경우에는 캐싱된 데이터와 다르게 되니까..

그래서 React-query는 데이터를 갱신해줄것이다.

아무때나 데이터를 갱신하면 안되겠지? 그래서 적절한 상황에 데이터 갱신이 필요하다.

1. 사용자가 화면을 보고 있을 시
2. 페이지 전환 시
3. 페이지 전환 없이 이벤트 발생 시

위 기능을 도와주는 옵션이 바로 StaleTime 이올시다.

staletime 은 fresh data -> stale data로 변경되는 시간을 말한다.

여기서 나는 fresh data와 stale data구분이 이해가 잘 안되었는데, 한번 나의 천재적인 두뇌로 설명해보겠다.

서버에서 특정 데이터가 있다. <- fresh
해당 데이터를 불러왔다. <- fresh
데이터가 사용자에 의해 변경되었다. <- stale
또는 데이터를 불러온지 5분(설정가능)이 지났다 <- stale

또한, 데이터가 이미 fresh일 경우에는 변경할 필요가 없으므로 위 3가지 갱신 조건에 맞아도 변경하지 않는다.

???: 아 선생님 그럼 데이터 갱신되는 동안 사용자는 놀아요?

그동안 stale 데이터를 사용자에게 임시로 제공해준다.

조금 많이 어렵다.
해당 구조를 찾아본 결과,

fetching -> fresh -> stale -> inactive -> delete

라는데 너무 어렵다. 좀 직접 사용해봐야 감이 잡힐 것 같아서 다음 챕터에서는 실전으로 넘어가볼까 한다.
사실 귀찮아서 개념만 공부할까 했는데, 개념마저 공부가 안된다 ㅋㅋ 큰일났다.

개발의 천재