리액트 쿼리 (1)

상태 관리하는 라이브러리 中 하나!

 

리액트에서는 상태(state) 관리하는게 굉장히 중요하다

상태(state) 관리하는 라이브러리 = Redux & React Query & Recoil & 리액트에서 자체적으로 제공하는 context API 등

 

많은 큰 회사들이 리액트 + 리덕스 묶어서 많이 사용했다!

 

React Query  - 비동기 상태를 파워풀하게 관리해주겠다.!

 

리액트의 상태

- 지역상태 : 작게, useState로 컴포넌트 내에서만 사용하는... 지역안에 있다...

- 전역상태 : 지역상태가 커진것 / 전체에서 쓰이는 상태들 ex.웹 사이트 테마, 색깔 정보, 유저 정보 등

- 서버상태 : API와 통신을 굉장히 많이 하는데, 그때 필요한 상태들 ex. 서버에서 받은 데이터, isLoading(Redux의 로딩스피너), 에러가 생기면 error 메시지 등의 서버 통신에서 사용되는 상태들

 

<단점>

서버 상태만 관리하기 때문에 나머지 두 상태를 관리할 필요가 없다.

= 지역 상태와 전역 상태를 관리하는 데는 리액트 쿼리가 맞지 않다.

 

but, 서버 상태는 완벽하게 관리해줄 것이다~

 

* Redux는 전역상태,서버상태 모두 다 관리가 가능하다 (but 단점:  애매하게 관리...)

 

 

 

https://tanstack.com/query/latest/docs/framework/react/overview

Overview | TanStack Query React Docs

 

<장점>

1. 코드가 단순해진다.

Redux는 코드를 엄청나게 길게 써야했다.

 

2. 캐시(라는 것)를 관리해준다.

 

내가 서버를 호출할 때 언제 서버를 호출할지, 어떤 상태를 호출할 지 내가 관리를 할 수 잇고

호출한 데이터를 캐시에 저장할 수 있는 기능도 있다.

 

서버에 요청을 할지 안할지에 대해서도 상태를 만들어 줄 수 있다.

 

알아서 garbage(쓰레기)를 정리해준다.

 

3. 서버상태와 전역상태를 분리하는 것이 가능하다!

but, 귀찮기 때문에 장점이자 단점!

cf. 리덕스의 장점 : 2개를 (한꺼번에) 다 관리할 수 있다!