[Kossie Coder] axios

npm install axios

// UserList.js

import React from 'react';

const UserList = (🌟{ users }🌟) => {
  console.log('users :>> ', users);
  return (
    <div>
      🌟{users.map((user) => {
        return (
          <div className="card mb-2" key={user.id}>
            <div className="card-body p-3">{user.name}</div>
          </div>
        );
      })}🌟
    </div>
  );
};

export default UserList;

// User.js

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

🌟const Users = () => {
  const [users, setUsers] = useState([]);

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

  return (
    <>
      <h1>Users1</h1>
      🌟<UserList users={users} />🌟
    </>
  );
};

export default Users;

 

User.js 에서 axios를 이용해 유저 데이터를 받아오고, 그것을 setUsers 로 변화를 주어 UserList 컴포넌트의 props 로 넘겨준다.

 

 

 

/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.

https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */