[Kossie Coder] 로딩 Spinner 추가하기

// 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 */