import React, { useState, useEffect } from 'react';
const url = 'https://api.github.com/users';
const UseEffectFetchData = () => {
const [users, setUsers] = useState([]);
// url주소 가져오기
const getUsers = async () => {
const response = await fetch(url);
const users = await response.json();
setUsers(users);
};
// [] = 사용하지 않으면 데이터가 무한으로 reload된다.
useEffect(() => {
getUsers();
}, []);
return (
<>
<h3>github users</h3>
<ul className='users'>
{users.map((user) => {
const { id, login, avatar_url, html_url} = user;
return (
<li key={id}>
<img src={avatar_url} alt={login} />
<div>
<h4>{login}</h4>
<a href={html_url}>profile</a>
</div>
</li>
);
})}
</ul>
</>
);
};
export default UseEffectFetchData;
'Front-end > React' 카테고리의 다른 글
React - controlled-input (0) | 2021.06.22 |
---|---|
React - removeEventListener (0) | 2021.06.18 |
useEffect 란? (0) | 2021.06.17 |
React - useState : Ragular Counter 만들기 (0) | 2021.06.17 |
React - useState 이해하기 (0) | 2021.06.17 |