[ Web ]/React.js

[React.js] Kossie Coder - 24강. 유저 데이터 화면에 출력하기

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}/>
		</>
	);
};
...