[Kossie Coder] user 페이지 라우트 추가 - useParams()

// 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 */