// User.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import UserList from '../components/UserList';
🌟import Spinner from '../components/Spinner';🌟
const Users = () => {
const [users, setUsers] = useState([]);
🌟const [loading, setLoaing] = useState(true); // 기본 로딩 상태를 true로 설정🌟
useEffect(() => {
axios.get('<https://jsonplaceholder.typicode.com/users>').then((response) => {
setUsers(response.data);
🌟setLoaing(false); // 렌더링 후 유저 데이터를 받아오면 로딩 상태 false로 변경🌟
});
}, []);
return (
<>
<h1>Users1</h1>
🌟{loading ? <Spinner /> : <UserList users={users} /> // 로딩상태에 따라 화면 보여줌🌟
</> 🌟// 로딩상태: true -> 로딩 스피너🌟
); 🌟// 로딩상태: false -> 유저 데이터🌟
};
export default Users;
// Spinner.js
import React from 'react';
const Spinner = () => {
return (
<div className="d-flex justify-content-center">
<div className="spinner-border text-secondary" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</div>
);
};
export default Spinner;
/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.
https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */
'React > Lecture' 카테고리의 다른 글
[Kossie Coder] user 페이지 라우트 추가 - useParams() (0) | 2022.01.21 |
---|---|
[Kossie Coder] routes 파일 만들기 (0) | 2022.01.16 |
[Kossie Coder] axios (0) | 2022.01.15 |
[Kossie Coder] NavLink 사용하기 (0) | 2022.01.15 |
[Kossie Coder] react router Switch, exact 속성 (0) | 2022.01.14 |