// 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 */
'React > Lecture' 카테고리의 다른 글
[Kossie Coder] user 페이지 라우트 추가 - useParams() (0) | 2022.01.21 |
---|---|
[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 |