HTTP Client – axios 사용
마스터욱
1
24
0
0
2021-06-24 15:01:50
Ajax 를 위해 axios를 설치
$ npm install --save axios
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function Customer_List() {
const [users, setUsers] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const Customer_List_Fetch = async () => {
try {
// 요청이 시작 할 때에는 error 와 users 를 초기화하고
setError(null);
setUsers(null);
// loading 상태를 true 로 바꿈
setLoading(true);
const response = await axios.get(
);
setUsers(response.data); // 데이터는 response.data 안에 들어있습니다.
} catch (e) {
setError(e);
}
setLoading(false);
};
useEffect(() => {
Customer_List_Fetch();
}, []);
if (loading) return <tr><td colSpan='4' style={{textAlign:'center'}}>로딩중...</td></tr>;
if (error) return <tr><td colSpan='4' style={{textAlign:'center'}}>에러가 발생했습니다</td></tr>;
if (!users) return <tr><td colSpan='4' style={{textAlign:'center'}}>데이터가 없습니다.</td></tr>;
return (
<>
{users.map(user => (
<tr key={user.id}>
<td>{user.phone}</td>
<td>{user.name}</td>
<td>10,000</td>
<td>2021-07-03</td>
</tr>
))}
</>
);
}
export default Customer_List;
생각보다 간단했음~
사용페이지에서는 import 만 해서 사용하면 된다.
import Customer_List from './Customer_List';
<tbody>
<Customer_List />
</tbody>
