1. UserList.js : 유저 리스트 컴포넌트 생성
import React from "react";
// users를 파라미터로 받아 옴
const UserList = ({users}) => {
return (
<div>
{users.map(user => {
return (
<div key={user.id}>
{user.name}
</div>
);
})}
</div>
);
};
export default UserList;
2. Users.js : UserList 컴포넌트 추가하고 유저 데이터 넘겨주기
import React, {useEffect, useState} from "react";
import UserList from "../components/UserList";
const Users = () => {
const [users, setUsers] = useState([]);
...
useEffect(() => {
console.log(users);
}, [users]);
return (
<>
<h1>Users</h1>
<UserList users={users}/>
</>
);
};
...