마스터욱 0 15 0 0
Ajax 를 위해 axios를 설치

$ npm install --save axios
import React, { useStateuseEffect } from 'react';
import axios from 'axios';

function Customer_List() {
  const [userssetUsers] = useState(null);
  const [loadingsetLoading] = useState(false);
  const [errorsetError] = 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 (loadingreturn <tr><td colSpan='4' style={{textAlign:'center'}}>로딩중...</td></tr>;
  if (errorreturn <tr><td colSpan='4' style={{textAlign:'center'}}>에러가 발생했습니다</td></tr>;
  if (!usersreturn <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>

 

Comments

10 마스터욱
답변      추천 
axios 로 Ajax 서버연동 설명
https://velopert.com/2597
https://beomy.tistory.com/36

카테고리