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}/>
</>
);
};
...
'[ Web ] > React.js' 카테고리의 다른 글
[React.js] Kossie Coder - 26강. 로딩 Spinner 추가하기 (0) | 2021.12.29 |
---|---|
[React.js] Kossie Coder - 25강. 유저 데이터 화면에 출력하기 2 (0) | 2021.12.29 |
[React.js] Kossie Coder - 23강. 유저 데이터 받아오기 (0) | 2021.12.29 |
[React.js] Kossie Coder - 22강. NavLink 사용하기 (0) | 2021.12.29 |
[React.js] Kossie Coder - 21강. React router 작동 원리 알아보기 (0) | 2021.12.29 |