๐ก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
'React > API ์ฐ๋' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] API ์ฐ๋ ๊ณต๋ถ ๋ง๋ฌด๋ฆฌ (0) | 2021.11.04 |
---|---|
[React] #6 | Context ์ ํจ๊ป ์ฌ์ฉํ๊ธฐ (0) | 2021.11.04 |
[React] #4 | useAsync ์ปค์คํ Hook ๋ง๋ค์ด์ ์ฌ์ฉํ๊ธฐ (0) | 2021.11.03 |
[React] #3 | useReducer๋ก ์์ฒญ ์ํ ๊ด๋ฆฌ (0) | 2021.11.03 |
[React] #2 | API ์ฐ๋์ ๊ธฐ๋ณธ (0) | 2021.11.03 |