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 */
'React > Lecture' 카테고리의 다른 글
[Kossie Coder] routes 파일 만들기 (0) | 2022.01.16 |
---|---|
[Kossie Coder] 로딩 Spinner 추가하기 (0) | 2022.01.15 |
[Kossie Coder] NavLink 사용하기 (0) | 2022.01.15 |
[Kossie Coder] react router Switch, exact 속성 (0) | 2022.01.14 |
[Kossie Coder] react router 설치 (0) | 2022.01.14 |