[Kossie Coder] (완강) user 페이지

// pages/User.js

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, setLoaing] = useState(true);
  const { id } = useParams();

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

  🌟const userDetail = loading ? ( // 로딩 상태가 false이면 화면에 유저 정보 보여줌
    <Spinner />
  ) : (
    <div>
      <div>{user.name}</div>
      <div>{user.email}</div>
      <div>{user.phone}</div>
    </div>
  );🌟

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

export default User;

 

// components/UserList.js

import React from 'react';
🌟import { Link } from 'react-router-dom';🌟

const UserList = ({ users }) => {
  return (
    <div>
      {users.map((user) => {
        return (
          <div className="card mb-2" key={user.id}>
            <div className="card-body p-3">
              🌟<Link to={`/users/${user.id}`}>{user.name}</Link>🌟
            </div>        🌟// 유저 이름에 유저 id로 링크 연결🌟
          </div>
        );
      })}
    </div>
  );
};

export default UserList;

 

 

 

최종 폴더구조

 

 

 

 

/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.

https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */