// routes.js
import Users from './pages/Users';
import User from './pages/User';
import Home from './pages/Home';
import Movies from './pages/Movies';
export default [
{
path: '/',
component: Home,
},
{
path: '/movies',
component: Movies,
},
{
path: '/users',
component: Users,
},
🌟{
path: '/users/:id', // 여기서 사용하는 것이 id이기 때문에 User.js 파일에서 useParams()로 받는 것이 id인 것
component: User,
},🌟
];
// pages/User.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import UserList from '../components/UserList';
import Spinner from '../components/Spinner';
🌟import { useParams } from 'react-router-dom';🌟
const User = () => {
const [user, setUser] = useState(null);
const [loading, setLoaing] = useState(true);
🌟const { id } = useParams(); // path가 '/Users/:id' 이기 때문에 id에 useParams()를 담는 것.🌟
console.log('user :>> ', user);
useEffect(() => {
axios
🌟.get('<https://jsonplaceholder.typicode.com/users/>' + id) // useParams()로 받아온 id🌟
.then((response) => {
setUser(response.data);
setLoaing(false);
});
}, []);
return (
<>
<h1>User 정보</h1>
{loading ? <Spinner /> : null}
</>
);
};
export default User;
// pages/Users.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import UserList from '../components/UserList';
import Spinner from '../components/Spinner';
const Users = () => {
const [users, setUsers] = useState([]);
const [loading, setLoaing] = useState(true);
useEffect(() => {
axios.get('<https://jsonplaceholder.typicode.com/users>').then((response) => {
setUsers(response.data);
setLoaing(false);
});
}, []);
return (
<>
<h1>Users</h1>
{loading ? <Spinner /> : <UserList users={users} />}
</>
);
};
export default Users;
/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.
https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */
'React > Lecture' 카테고리의 다른 글
[Kossie Coder] (완강) user 페이지 (0) | 2022.01.22 |
---|---|
[Kossie Coder] routes 파일 만들기 (0) | 2022.01.16 |
[Kossie Coder] 로딩 Spinner 추가하기 (0) | 2022.01.15 |
[Kossie Coder] axios (0) | 2022.01.15 |
[Kossie Coder] NavLink 사용하기 (0) | 2022.01.15 |