[신세계I&C KDT][React] #50 Tanstack Query (0715)

Tanstack Query
https://tanstack.com

1) tanstack query 설치 및 사용

npm install @tanstack/react-query

사용
import {
useQuery,
useMutation,
useQueryClient,
QueryClient,
QueryClientProvider,
} from '@tanstack/react-query'

2) useQuery

• select 작업 시

3) useMutation

• insert / update / delete 작업 시 사용

4) useEffect + fetch API 코드를 다음과 같이 수정한다

# Users.js
       import {
	  useQuery,
	  useMutation,
	  useQueryClient,
	  QueryClient,
	  QueryClientProvider,
	} from '@tanstack/react-query'

	       // TanStack query
	  // useQuery는 조회할 때 사용
	  const {data,isLoading, isError, error} = useQuery(
	    { queryKey: ['todos'], 
	      queryFn: fetchEvent }
	    )

	   //화면출력 코드
	    let content;
	    if(isLoading){
	      content = "로딩중입니다.";
	    }
			    if(error){
			      content = "에러 발생됨";
			    }
			    if(data){
			      content= <UserList data={data}/> 
			    }
			    return(
				<>
				<h2>Users</h2>
				{content}
			      </>
			    );
			}

			export default Users;
  
         # App.js
	      import {
		  useQuery,
		  useMutation,
		  useQueryClient,
		  QueryClient,
		  QueryClientProvider,
		} from '@tanstack/react-query'

 
               // Create a client
		const queryClient = new QueryClient()

		function App() {
		  return (
		    <QueryClientProvider client={queryClient}>
		       <RouterProvider router={router} />
		    </QueryClientProvider>
		  );
		}

		export default App;

5) useQuery 옵션

• 기본적으로 Tanstack query는 다른 화면에 갔다오면 자동으로 fetch가 된다
  이 동장으로 서버의 변경 사항을 비동기적으로 클라이언트와 동기화가 가능하다 ★
  이 작업을 다음 2개의 옵션으로 조절이 가능하다
• staleTime: 0 (기본) , 1/1000 초
  예> staleTime : 5000 (5초) (5초 안에서는 fetch가 재동작 안 한다는 뜻)
• gcTime : 5분 (기본), 1/1000초, fetch해서 받은 캐시데이터를 보관하는 시간

6) useMutation

https://tanstack.com/query/latest/docs/framework/react/guides/mutations

• 생성, 수정, 삭제하고 useQuery를 쓰면 기본적으로 갱신이 안 됨 !!!!
  (회원 add하고 목록으로 가도 add한 게 뜨지 않는다는 뜻)
  cache로 동작하기 때문이다
  따라서 cache를 무효화해줘야 다시 서버에서 fetch를 한다

7) React Router의 loader 함수 및 action 함수에서 Tanstack query 사용