[JavaScript] React-Query 개념, 사용법 정리

react-query는 서버의 값을 가져오거나  캐싱, 업데이트, 에러를 핸들링하는것에 도움을 주는 라이브러리다.

 

React Query 기능

• 서버, 클라이언트 데이터를 분리
• get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다.
• 동일 데이터 여러 요청이 들어오면 한번만 요청 (중복 허용 시간 조절 가능)
• 비동기 과정을 선언적으로 관리
• useEffect를 사용한 api선언에 대한 문제점을 해결할 수 있다.
• 무한 스크롤 

 

 초기 설정

react-query를 사용하기 위해서는 초기 세팅이 필요하다.

index.js파일 내부에 QueryClient를 이용해 초기 옵션들을 설정해주고, QueryClientProvider로 감싸주어야 한다.

세부적인 옵션의 내용들은 공식문서를 참고하는게 좋다! (옵션이 되게 많음)

useQuery(“쿼리키”,콜백함수)

const test = useQuery(
//배열내부에 여러개를 선언하면, 해당 쿼리명이 변경될 때 마다 새롭게 호출한다.
    ['쿼리 이름',name],
    () => getApi(params),
    { enabled: !!auth },
  );

• get을 위해서 사용하는 기능
• 한번에 한개의 api만 호출이 가능하다.
• 첫번째 파라미터로 unique key, 두번째로 비동기 함수,세번째 파라미터로 여러 기능들을 설정할 수 있다.
• Unique key를 이용하면 다른 컴포넌트에서도 호출 가능
• 비동기적으로 작동(endabled를 사용하여 조건을 걸면 동기적으로 사용할 수 있다)
  
  

 

useQueries

let trigger=false;

//배열로 선언해서 여러개의 api를 실행할 수 있다.
const queries = useQueries([{
    queryKey: ['test1',time],
    queryFn: () => {
    	getFirst(params);
    	trigger=true;
    }
  },
  //enabled에 boolean 조건을 통해 동기적으로 실행할 수 있다.
  	{
    	queryKey: ['test2',time],
    	queryFn: () => getSecond(params),
    	enabled: trigger,
  	},
  ]);

• 하나의 배열에 각 쿼리에 대한 상태값이 객체로 들어온다.
• useQuery를 여러 개 나열한 것으로 생각하면 된다.
  
  

 

 

queryCache

const queryClient = new QueryClient({
	queryCache:new QueryCache({
    	onError:(error,query)=>{
        	console.log(error,query);
        },
        onSuccess:(data)=>{
        	console.log(data);
        }
    })
})

• 포함된 모든 데이터,메타 정보 및 쿼리 상태를 저장한다.
• 쿼리에 대한 성공, 실패에 대한 전처리를 할 수 있다.

 

 

invalidateQueries(“쿼리키”)

const queryClient=new QueryClient();
//단일
queryClient.invalidateQueries('다시받아올 쿼리의 키값을 입력');
//다중
queryClient.invalidateQueries(['key1','key2','key3']);

 

• 데이터 캐시를 무효화하여 새로운 데이터를 강제로 가져오도록 하는 역할
• React query는 데이터를 자동으로 캐싱하며 관리하지만 임의로 데이터를 가져와야하는 상황에서 사용한다.
• 보통 useMutation과 함께 사용하여, post, put, delete동작과 함께 사용된다.

 

 

useMutation

//첫번째 인자로 함수를, 두번째인자로 상태에 따른 동작을 설정할 수 있다.
const { mutate: postUser } = useMutation(
(data) => addUser(data), 
{
//invalidateQueries와 함께 사용하여 데이터를 다시 받아올 수 있다.
    onSuccess: (response) => {
      console.log(response.data);
      queryClient.invalidateQueries(['userList', userParam]);
    },
    onError: (error) => {
      console.log(error.response.data.message);
    },
  });

• 값을 변경하기 위해 사용하는 api (post, put, delete)
• 성공,실패에 따라 동작을 설정할 수 있다.
• return값은 useQuery와 동일
• Update가 끝나면 unique key를 사용하여 다시 get을 실행할 수 있다.

 

 

React Suspense

• Suspense를 사용하여 loading을 핸들링하고, error boundary를 사용해 에러핸들링을 할 수 있다.
• Suspense를 사용하면 로딩중일 때 보여지는 컴포넌트를 fallback을 활용하여 설정할 수 있다.
• 하지만 suspense를 남용하게 되면 network waterfall이 발생하여 심각한 로딩 성능의 저하를 야기할 수 있다.