[React] #5 | react-async, 요청 상태 관리하기

💡react-async?

• #4에서 만든 useAsync와 비슷한 함수가 들어있는 라이브러리
• 이안의 함수이름도 useAsync : 사용법이 좀 다름!

라이브러리 설치

yarn add react-async

react-async의 공식 사용법

import { useAsync } from "react-async"

const loadCustomer = async ({ customerId }, { signal }) => {
  const res = await fetch(`/api/customers/${customerId}`, { signal })
  if (!res.ok) throw new Error(res)
  return res.json()
}

const MyComponent = () => {
  const { data, error, isLoading } = useAsync({ promiseFn: loadCustomer, customerId: 1 })
  if (isLoading) return "Loading..."
  if (error) return `Something went wrong: ${error.message}`
  if (data)
    return (
      <div>
        <strong>Loaded some data:</strong>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    )
  return null
}

• 파라미터로 넣는 옵션 객체에는 호출할 함수 promiseFn을 넣고, 파라미터도 필드 이름과 함께 (customId)를 넣어주어야한다.

---

1️⃣ User 컴포넌트 전환

• react-async의 useAsync로 전환해보자

User.js

import React from 'react'
import axios from 'axios';
import useAsync from './useAsync';

async function getUser({id}){
    const response = await axios.get(
        'api주소/${id}'
    );
    return response.data;
}

function Users({ id }) {

    const { data: user, error, isLoading } = useAsync({
        promiseFn: getUser,
        id,
        watch: id
    })


    if (isLoading) return <div>로딩중..</div>     // 로딩이 활성화되었을 때
    if (error) return <div>에러가 발생했습니다.</div>
    if (!users) return null;

    return (
        <div>
            <h2>{user.username}</h2>
            <p>
                <b>Email:</b> {user.email}
            </p>
        </div>
    )
}

export default Users

useAsync를 사용할 때에는 프로미스를 반환하는 함수의 파라미터를 객체형태로 해주어야한다.

async function getUser({ id }) {}

그래야, id 값을 따로 받아와서 사용할 수 있게 된다.

그리고, useAsync를 사용할 때, watch 값에 특정 값을 넣어주면 이 값이 바뀔 때마다 promiseFn 에 넣은 함수를 다시 호출해 준다.

 

 

2️⃣ Users 컴포넌트 전환

Users.js

import React, { useState } from 'react';
import axios from 'axios';
import { useAsync } from 'react-async';
import User from './User';

// useAsync 에서는 Promise 의 결과를 바로 data 에 담기 때문에,
// 요청을 한 이후 response 에서 data 추출하여 반환하는 함수를 따로 만들었습니다.
async function getUsers() {
  const response = await axios.get(
    'api 주소'
  );
  return response.data;
}

function Users() {
  const [userId, setUserId] = useState(null);   //userId 상태관리
  
  const { data: users, error, isLoading, reload } = useAsync({
      promiseFn: getUsers
  })
  if (isLoading) return <div>로딩중..</div>;
  if (error) return <div>에러가 발생했습니다</div>;
  if (!users) return <button onClick={reload}>불러오기</button>;
  return (
    <>
      <ul>
        {users.map(user => (
          <li
            key={user.id}
            onClick={() => setUserId(user.id)}
            style={{ cursor: 'pointer' }}
          >
            {user.username} ({user.name})
          </li>
        ))}
      </ul>
      <button onClick={reload}>다시 불러오기</button>
      {userId && <User id={userId} />}
    </>
  );
}

export default Users;

• reload 함수 : 데이터를 다시 불러올 수 있다.

 

지금은, 이전에 Users 컴포넌트를 만들 때, 불러오기 버튼을 눌러야만 데이터를 불러오도록 만들어줬었는데, 이렇게 해주면 컴포넌트를 렌더링하는 시점부터 데이터를 불러오게 된다.

 

만약 이전에 배웠던 skip 처럼, 렌더링 하는 시점이 아닌 사용자의 특정 인터렉션에 따라 API를 호출하고 싶을 땐 promiseFn 대신 deferFn 을 사용하고, reload 대신 run 함수를 사용한다.

 

Users.js

import React, { useState } from 'react';
import axios from 'axios';
import { useAsync } from 'react-async';
import User from './User';

// useAsync 에서는 Promise 의 결과를 바로 data 에 담기 때문에,
// 요청을 한 이후 response 에서 data 추출하여 반환하는 함수를 따로 만들었습니다.
async function getUsers() {
  const response = await axios.get(
    'api 주소'
  );
  return response.data;
}

function Users() {
  const [userId, setUserId] = useState(null);   //userId 상태관리
  
  const { data: users, error, isLoading, run } = useAsync({
      deferFn: getUsers
  })
  if (isLoading) return <div>로딩중..</div>;
  if (error) return <div>에러가 발생했습니다</div>;
  if (!users) return <button onClick={run}>불러오기</button>;
  return (
    <>
      <ul>
        {users.map(user => (
          <li
            key={user.id}
            onClick={() => setUserId(user.id)}
            style={{ cursor: 'pointer' }}
          >
            {user.username} ({user.name})
          </li>
        ))}
      </ul>
      <button onClick={run}>다시 불러오기</button>
      {userId && <User id={userId} />}
    </>
  );
}

export default Users;

이제, 렌더링 시에는 데이터 요청을 하지 않고, 불러오기 버튼을 눌렀을 때 데이터 요청을 하게 된다.

 

 

---

Reference

벨로퍼트의 모던 리액트