React 13-2 React-qurery (사용 이유, 장점, 사용 방법)

1. 사용 이유

 - 가장 큰 이유는 api 호출 시 코드가 간단하다는 것, 그리고 클라이언트 테이터와 서버 데이터를 분리한 가는 것이라고 생각한다.

 

 

---

2. 장점

• 캐싱 (? 컴퓨팅에서 캐시는 일반적으로 일시적인 특징이 있는 데이터 하위 집합을 저장하는 고속 데이터 스토리지 계층입니다. 따라서 이후에 해당 데이터에 대한 요청이 있을 경우 데이터의 기본 스토리지 위치에 액세스 할 때보다 더 빠르게 요청을 처리할 수 있습니다.)
• get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행하고 오래된 것을 판단하여 다시 get 한다.
• 동일한 데이터를 여러 번 요청하면 1번만 요청한다. (중복 호출 허용 시간 조절 가능)
• 비동기 과정을 선언적으로 관리할 수 있으며 React hook과 사용하는 구조가 비슷하다.

 

 

---

3. 사용하는 방법

 - 이번에는 React-qurery를 사용해서 api를 호출해 보자!! 먼저 라이브러리를 다운로드하여야 한다.

  공식 문서 링크

$ npm i react-query
# or
$ yarn add react-query

 

우선 가장 먼저 알아야 하는 것은 useQuery이다.

const { 내장 함수 } = useQuery(고유 키 값, api 호출 함수);

 

 

사용 예시로 사용 방법을 알아보자!!

1. api.js 만들어 import로 함수 호출할 수 있게 만든다.

// api.js

export async function 함수명() {
  return fetch('api url').then(response => response.json());
}

 

2. import를 이용해 함수를 불러온다.

const { isLoading, data } = useQuery('고유 키', 호출 함수)

 

3. 내장 함수인 isLoading, date

• isLoading : boolean으로 date가 로딩 중일 때 true , 완료 시 false
• date : 받아온 date를 가지고 오는 함수

{isLoading ? <div>Loading...</div> : (
  <div>
    {date} 원하는 값들을 불러오면 됨.
  </div>

 

 

만약 한 파일 안에 2개의 api 호출 시

 - api를 2개 호출 시 isLoading와 date가 있어야 로딩 결과 및 date를 가져올 수 있는데 같은 이름이라 오류가 생긴다. 그럴 때는 isLoading와 date 뒤에 :를 붙이고 원하는 변수명을 붙이면 된다.

const { isLoading: 원하는 명, data: 원하는 명 } = useQuery('고유 키', 호출 함수);

 

 

인자가 필요시

 - 예만 봐도 알 수 있어 예를 남기겠습니다~~

    const { isLoading, data } = useQuery(
        ['고유 키', 인자], () => 호출 함수(인자)
    );