Bootstrap 시작하기

Official CDN of Bootstrap and Font Awesome

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">

위의 CSS의 HTML태그 코드를 복사하여 public폴더의 index.html에 붙여줍니다.

Card

• card 형태로 출력

import React from 'react';

const UserList = ({ users }) => {
    console.log(users);

    return (
        <div>
            {users.map(user => {
                return (
                    <div className="card" key={user.id}>
                        <div className="card-body">
                            {user.name}
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

export default UserList;

Bootstrap card 코드를 map() 함수 안 return 값에 넣어 카드 형태로 모든 유저 이름을 출력하도록 하였습니다.

key는 'card' 클래스에 속성으로 넣어줍니다.

카드 형식으로 깔끔하게 출력되는 것을 알 수 있습니다.

Spinners

로딩 중 icon

데이터를 받아오기 전 로딩 중 표시하기

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import UserList from '../components/UserList';
import Spinner from '../components/Spinner';

const Users = () => {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(response => {
                setUsers(response.data);
                setLoading(false);
            });
    }, []);

    return (
        <>
            <h1>Users</h1>
            {loading ? <Spinner /> :
            <UserList users={users}/>}
        </>
    );
}

export default Users;

• 데이터 받기 전, 후의 로딩 여부 useState로 변경

const [loading, setLoading] = useState(true);

useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
            setUsers(response.data);
            setLoading(false);
        });
}, []);

초기 로딩 state를 true로 설정하고, axios로 데이터를 받아온 후에는 setLoading()으로 로딩 state를 false로 바꿔줍니다. 그렇게 되면 데이터를 받기 전까지만 로딩중 상태가 됩니다.

• 로딩 state가 참일 때 로딩중 화면에 출력

{loading ? <Spinner /> : <UserList users={users}/>}

loading 값이 참이면 Spinner(로딩중 화면)을 출력하고, 거짓이면 user들의 이름을 화면에 출력시킵니다.

import React from 'react';

const Spinner = () => {
    return (
        <div className="d-flex justify-content-center">
            <div 
                className="spinner-border" 
                style={{width: '3rem', height: '3rem'}} 
                role="status"
            >
                <span className="sr-only"></span>
            </div>
        </div>
    );
};

export default Spinner;