목표
- 목록 페이지 만들기
- axios.get()으로 목록 페이지 서버 데이터 받기
- dayjs 패키지를 이용해 날짜 포맷하기
결과 화면
1. axios 패키기 설치하기
axios 패키기를 설치한다.
이미 설치되어 있다면 설치하지 않아도 된다.
yarn add axios
또는
npm install axios
2. axios.get()으로 서버 데이터 받기
https://jae-study.tistory.com/80
Nest.js와 Psql을 사용해서 백앤드와 데이터베이스를 만들었다.
직접 백앤드와 데이터베이스를 만들어도 되고,
JSONPlaceholder 사이트를 통해 가짜 데이터를 받아와도 된다.
Postman을 통해서 GET으로 받아온 데이터를 확인할 수 있다.
- src/pages/board/list/index.tsx
- useEffect()를 안에 axios를 작성한다.
- 목록 페이지는 서버에서 데이터를 받아 화면에 보여주면 되기 때문에 get() 메서드를 사용한다.
- [setBoardList] state 변수에 axios로 받아온 데이터를 저장한다.
const BoardList = () => {
const [boardList, setBoardList] = useState<BoardType[]>([])
useEffect(() => {
axios.get('http://localhost:3001/board')
.then((response) => {
setBoardList(response.data)
})
.catch(function(error) {
console.log(error)
})
}, [])
return (
<div className="board-list">
<table>
...
</table>
</div>
)
}
export default BoardList
3. 서버 데이터를 화면에 출력하기
- src/pages/board/list/index.tsx
[setBoardList] state 변수에 저장한 데이터를 map() 메서드를 사용해 화면에 출력한다.
const BoardList = () => {
const [boardList, setBoardList] = useState<BoardType[]>([])
useEffect(() => {
...
}, [])
return (
<div className="board-list">
...
<tbody>
{
boardList.map((board, index) => {
return (
<tr key={index}>
<td>{index + 1}</td>
<td className="title">
<Link to={`/board/${board.id}`}>{board.title}</Link>
</td>
<td>{board.created_at}</td>
</tr>
)
})
}
</tbody>
</table>
</div>
)
}
4. dayjs 패키지를 사용해 날짜 포맷하기
dayjs 패키지를 설치한다.
yarn add dayjs
또는
npm install dayjs
- src/pages/board/list/index.tsx
dayjs().format()에 원하는 날짜 형식을 작성한다.
const BoardList = () => {
const [boardList, setBoardList] = useState<BoardType[]>([])
useEffect(() => {
...
}, [])
return (
<div className="board-list">
...
<tbody>
{
boardList.map((board, index) => {
return (
<tr key={index}>
<td>{index + 1}</td>
<td className="title">
<Link to={`/board/${board.id}`}>{board.title}</Link>
</td>
// 수정한 부분
<td>{dayjs(board.created_at).format('YYYY.MM.DD')}</td>
</tr>
)
})
}
</tbody>
</table>
</div>
)
}
전체 코드
- src/pages/board/list/index.tsx
import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import axios from 'axios'
import dayjs from 'dayjs'
import { BoardType } from '../../../interface/BoardType'
import Title from '../../../components/text/Title'
import './index.scss'
const BoardList = () => {
const [boardList, setBoardList] = useState<BoardType[]>([])
const boardLength = boardList.length
useEffect(() => {
axios.get('http://localhost:3001/board')
.then((response) => {
setBoardList(response.data)
})
.catch(function(error) {
console.log(error)
})
}, [])
return (
<div className="board-list">
<Title children="Board list"/>
<h4>Total post : {boardLength}</h4>
<table>
<colgroup>
<col width="15%"/>
<col width="65%"/>
<col width="20%"/>
</colgroup>
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Date</th>
</tr>
</thead>
<tbody>
{
boardList.map((board, index) => {
return (
<tr key={index}>
<td>{index + 1}</td>
<td className="title"><Link to={`/board/${board.id}`}>{board.title}</Link></td>
<td>{dayjs(board.created_at).format('YYYY.MM.DD')}</td>
</tr>
)
})
}
</tbody>
</table>
</div>
)
}
export default BoardList
#2.1
axios.get()을 통해서 서버 데이터를 받아오고,
map() 메서드를 통해 화면에 출력한 뒤,
dayjs 패키지를 사용해서 날짜를 포맷했다.
'React > 게시판 만들기(TS)' 카테고리의 다른 글
| [리액트][타입스크립트] #5 게시판 만들기 - 수정, 삭제 페이지 (axios.patch, axios.delete) (0) | 2023.07.05 |
|---|---|
| [리액트][타입스크립트] #4 게시판 만들기 - 생성 페이지 (axios.post) (0) | 2023.07.05 |
| [리액트][타입스크립트] #3 게시판 만들기 - 상세 페이지 (axios.get) (0) | 2023.07.05 |
| [리액트][타입스크립트] #2.2 게시판 만들기 - 목록 페이지네이션 (react-js-pagination) (0) | 2023.06.30 |
| [리액트][타입스크립트] #1 게시판 만들기 - 페이지 세팅 및 라우터 연결하기 (0) | 2023.06.30 |
