1112

[삐돌이]

https://jsonplaceholder.typicode.com/users

[users.jsx]

import React, { useState } from 'react';

import axios from 'axios';

import useAsync from  '../useAsync';

import User from './user';

// useAsync에서는 Promise의 결과 바로 data에 담기 때문에,

//요청을 한 이후 response에서 data 추출하여 반환하는 함수를 따로 만듬

async function getUsers() {

    const response = await axios.get(

        'https://jsonplaceholder.typicode.com/users'

    );

    return response.data;

}

function Users(){

    const [userId, setUserId] = useState(null);

    const [state, refetch] = useAsync(getUsers, [], true);

    const { loading, data: users, error} = state;

    if(loading) return <div>로딩중...</div>

    if(error) return <div>에러가 발생!!!</div>

    if(!users) return <button xxxxonClick={refetch}>불러오기</button>;

    return (

        <>

        <ul>

            {users.map(user => (

                <li key={user.id} xxxxonClick={() => setUserId(user.id)} style={{ cursor: 'pointer'}}>

                    {user.username} ({user.name})

                </li>

            ))}

        </ul>

        <button xxxxonClick={refetch}>다시 불러오기</button>

        {userId && <User id={userId}/>}

        </>

    );

};

export default Users;

[app.css]

.movies{

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    padding: 50px;

    padding-top: 70px;

    width: 80px;

}

.movie{

    width: 45%;

    background-color: #fff;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    padding: 20px;

    border-radius: 50px;

    box-shadow:

    0 13px 27px -5px rgba(50, 50, 93, 0.25),

    0 8px 16px -8px rgba(0, 0, 0, 0.3),

    0 -6px 16px -6px rgba(0, 0, 0, 0.025);

}  

.movie img {

    position: relative;

    top: -50px;

    max-width: 150px;

    width: 100%;

    margin-right: 30px;

    box-shadow:

     0 30px 60px -12px rgba(50, 50, 93, 0.25),

      0 8px 36px -18px rgba(0, 0, 0, 0.3),

      0 -12px 36px -8px rgba(0, 0, 0, 0.025);

  }

  .movie .movie__year,

  .movie .movie__title {

    margin: 0;

    font-weight: 300;

  }

  .movie .movie__title {

    margin-bottom: 5px;

    font-size: 24px;

    color: #2c2c2c;

  }

  .movie .movie__genres {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    margin: 5px 0px;

  }

  .movie .movie__year {

    margin-right: 10px;

    font-size: 14px;

  }