React-query 상태 관리

📖React-query 알기전에 JSX란?

---

• JSX(javascript XML)는 javascript에 XML을 추가한 확장한 문법이다.
• JSX는 React에서 사용되는데 공식적인 자바스크립트 문법은 아니다.
• JSX는 javascript 확장한 문법으로 바벨등등을 사용하여 트랜스파일러로 javascript 형태의 코드로 변환이 된다.
• JSX 문법은 반드시 부모요소 하나가 감싸는 형태 여야한다.
  • <> </> 문법으로 부모요소를 만드는 경우가 많다. 
• JSX에서 javascript 표현식을 작성하려면 {}로 코드를 감싸줘야한다.
  • {isLoading && <div>Loading</div>} 
• JSX에서 class사용이 아닌 className을 사용한다.

---

🤳React-query 란?

 

 

---

• React-query는 서버 상태 라이브러리 입니다. 서버와 클라이언트의 비동기적인 동작을 관리하기에 적합하다!
• React application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리 이다.
• React-query를 사용해서 axios, fetch등와 같이 비동기 요청을 보내주는 도구들과 함께 효율적으로 사용을 할 수있다.

---

🤳why? React-query!

---

• 서버데이터의 캐시를 관리한다. 즉 React-query 어떻게 구성했느냐에 따라 해당 데이터 캐시를 유지 관리한다. 
  • 데이터를 관리해주는것은 React-query이지만 서버의 새 데이터로 캐시를 업데이트하고 관리하고 설정하는것은 사용자이다. 
  • React-query는 설정에 따라서 데이터 업데이트, 캐싱관리등을 설정 할 수 있다.
• react-query는 loading, error state 관리, pagination & infinite scroll 관리, prefetching, mutations 데이터 변경관리, 중복제거 등등 편리하게 사용 할 수 있는 강력하고 편리한 기능을 제공한다.

---

👀React-query 사용방법

---

• npm install react-query
• query client 만들어서 query와 cache를 관리하는 클라이언트가 필요 
• query provider 사용해서 전역으로 자식 컴포넌트들이 React-qeury를 사용하게함

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

ReactDOM.render(
   <QueryClientProvider client={queryClient}>
      <App />
   </QueryClientProvider>
  document.getElementById('root')
);

React 전역에 React-query provider를 적용해준다. 

 import { useQuery } from "react-query";
 
 const { data, isError, isLoading } = useQuery(
    'posts', 
    fetchPosts,
  );
  
  if(isLoading) return <h3>Loading...</h3>;
  if(isError) return <h3>Oops, something went wrong</h3>;

useQuery 활용해서 데이터를 fetching 한다. 

useQuery 안에 queryKey 데이터를 패칭할때 key이며 필수적으로 필요합니다.

 

"fetchPosts는 axios 혹은 fetch의 통신을 함수로 따로 만들었다."

async function fetchPosts() {
  const response = await fetch(
    `API 통신 URL`
  );
  return response.json();
}

기본적인 React-qeury 사용법입니다.