[React.js] Kossie Coder - 29, 30강. user 페이지 라우트 추가, user 페이지

1. User.js : User 컴포넌트 생성

import React, {useEffect, useState} from "react";
import axios from "axios";
import Spinner from "../components/Spinner";
import {useParams} from "react-router-dom";

const User = () => {
	const [user, setUser] = useState(null);
	const[loading, setLoading] = useState(true);
	const {id} = useParams();

	useEffect(() => {
		axios.get('https://jsonplaceholder.typicode.com/users/' + id)
			.then(response => {
				setUser(response.data);
				setLoading(false);
			};
	}, []);

	const userDetail = loading ? <Spinner/> : (
		<div>
			<div>{user.name}</div>
			<div>{user.email}</div>
			<div>{user.phone}</div>
		</div>
	);

	return (
		<>
			<h1>User 정보</h1>
			{userDetail};
		</>
	);
};

export default User;

2. routes.js : User 컴포넌트 추가

...
import User from "./pages/User";

export default [
	...
	{
		path:'/users/:id',
		component: User
	}
];