react-query

react-query

react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다.

직접 사용해 보니 가장 좋은 점은, 서버, 클라이언트 데이터를 분리하는 것 이였다.

1)가장 기본이 되는 App.tsx에 세팅한다.

2)useQuery

데이터를 get 하기 위한 api. post, update는 useMutation을 사용.

첫번째 파라미터로 unique Key가 들어가고, 두번째 파라미터로 비동기 함수(api호출 함수)가 들어간다. (당연한 말이지만 두번째 파라미터는 promise가 들어가야함.)

첫번째 파라미터로 설정한 unique Key는 다른 컴포넌트에서도 해당 키를 사용하면 호출 가능. unique Key는 string과 배열을 받습니다. 배열로 넘기면 0번 값은 string값으로 다른 컴포넌트에서 부를 값이 들어가고 두번째 값을 넣으면 query 함수 내부에 파라미터로 해당 값이 전달된다.

return 값은 api의 성공, 실패여부, api return 값을 포함한 객체이다.
useQuery는 비동기로 작동한다. 즉, 한 컴포넌트에 여러개의 useQuery가 있다면 하나가 끝나고 다음 useQuery가 실행되는 것이 아닌 두개의 useQuery가 동시에 실행된다.

여러번 봐야 조금씩 이해될 것 같다🤔
useEffect의 단점은 서버에 중복 요청을 하게 되어 비효율적이고, 데이터 중복 문제가 발생한다. 따라서 좀 더 효율적인 react-query예제를 좀 더 찾아봐야겠다.