본문 바로가기

Front-end/React

React - useEffect : github user profile 만들기

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