react-bootstrap-table 사용하기
백엔드에서 몽고 DB에 저장되어있는 json형태의 데이터를 받아온 후, react-bootstrap-table을 사용하여 나타내기 위한 코드입니다.
코드를 분해해서 설명하고, 합친 최종 코드를 마지막에 보여드리려고 합니다.
1. 백엔드에서 DB 데이터 가져오기
백엔드에선 아래 코드에서 확인할 수 있듯이, 3001번 포트의 /community로 json 데이터를 쏴주고 있습니다. 우리는 이 데이터를 가져와서 사용할 겁니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//여기에 DB 데이터 저장
const [boardList, setBoardList] = useState([])
//DB 데이터 불러오기
const getList = () => {
//3001번 포트의 community에서
Axois.get("http://localhost:3001/community", {})
.then((res) => {
//결과값을 객체 형태로 저장
const {data} = res;
setBoardList(data)
})
.catch((e) => {
console.error(e);
})
}
2. react-bootstrap-table 사용하기
react-bootstrap-table은 객체 형태의 데이터를 각 행에는 그 객체, 각 열에는 객체의 변수값들을 나타낼 수 있습니다.
return 값에 BootstrapTable를 사용하여 테이블을 생성해줍니다. 이 테이블에 들어갈 데이터는 컴포넌트 안의 data={} 코드로 설정할 수 있습니다.
options는 리액트 부트스트랩 테이블의 사용자 커스터마이징 제공 기능으로, defaultSortName은 정렬 기준 defaultSortOrder는 정렬 방식, searchPosition은 검색란의 위치를 설정하는 것입니다.
onRowClick은 행을 클릭했을 때의 이벤트를 설정하는 옵션인데, 저같은 경우, 게시물의 상세보기를 위해 react-router-dom의 useNavigate함수를 사용하여 페이지를 이동시키고, 그 페이지의 라우팅은 app.js에서 게시물의 작성자 주소와 제목을 사용하여 url을 설정해놨습니다. 그래서, navigate를 사용하여 그 url로 가고, 그 과정에서 state로 게시물의 값들을 같이 보내서 상세보기 url로 들어갔을 때 게시물의 값들이 보일 수 있도록 코드를 짰습니다.
이 옵션은 아래 코드와 같이 BootStrapTable 컴포넌트에서 options={options}로 설정하여 테이블에 사용할 수 있습니다.
그 외에 pagination은 테이블의 페이징기능입니다.
search={true}는 검색기능 활성화인데, 이 코드만으로 테이블 내의 검색기능이 활성화되고, 자동으로 검색어 입력란이 테이블 상단에 위치하게 됩니다. 이 위치는 상술했듯이, options에서 설정해줄 수 있습니다.
BootstrapTable 안의 TableHeaderColumn은 각 열에 대한 컴포넌트이고, 각 열의 넓이를 이 컴포넌트 안에서 설정해줄 수 있습니다.
- width는 열의 넓이
- dataField는 상위 컴포넌트인 BootstrapTable에서 가져온 데이터 객체인 boardList의 변수값
- isKey는 테이블의 기준 키를 설정해주는데, 중복값이 있을 수 있는 변수로는 설정해주지 않는 것을 권장합니다.
- dataAlign으로 열에 있는 값들을 가운데정렬해주었습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const navigate = useNavigate();
const options = {
defaultSortName: 'createdAt',
defaultSortOrder: 'desc',
searchPosition: 'left',
onRowClick: function(row) {
navigate(`${row.address}/${row.title}`, {state:{address:row.address, title:row.title, content:row.content, createdAt:row.createdAt}})
}
}
return (
<BootstrapTable data={boardList} options={options} pagination search={true} multiColumnSearch={true}>
<TableHeaderColumn width='350' dataField='address' isKey={true} dataAlign='center'>주소</TableHeaderColumn>
<TableHeaderColumn width='200' dataField='title' dataAlign='center'>제목</TableHeaderColumn>
<TableHeaderColumn width='200' dataField='createdAt' dataAlign='center'>작성일</TableHeaderColumn>
</BootstrapTable>
)
1, 2번을 합친 최종 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import React, {useState, useEffect} from 'react';
import Axios from 'axios';
import {useNavigate} from 'react-router-dom';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
//게시판 컴포넌트
function BoardList() {
//여기에 DB 데이터 저장
const [boardList, setBoardList] = useState([])
//DB 데이터 불러오기
const getList = () => {
//3001번 포트의 community에서
Axois.get("http://localhost:3001/community", {})
.then((res) => {
//결과값을 객체 형태로 저장
const {data} = res;
setBoardList(data)
})
.catch((e) => {
console.error(e);
})
}
//아래 코드는 이 컴포넌트가 렌더링 될 때, getList()함수를 딱 한번만 사용하기 위해서 넣어줬습니다. 이 코드가 없으면 getList()함수가 계속 실행됩니다!!
useEffect(() => {
getList();
},[])
const options = {
defaultSortName: 'createdAt',
defaultSortOrder: 'desc',
searchPosition: 'left',
onRowClick: function(row) {
navigate(`${row.address}/${row.title}`, {state:{address:row.address, title:row.title, content:row.content, createdAt:row.createdAt}})
}
}
return (
<BootstrapTable data={boardLList} options={options} pagination search={true} multiColumnSearch={true}>
<TableHeaderColumn width='350' dataField='address' isKey={true} dataAlign='center'>주소</TableHeaderColumn>
<TableHeaderColumn width='200' dataField='title' dataAlign='center'>제목</TableHeaderColumn>
<TableHeaderColumn width='200' dataField='createdAt' dataAlign='center'>작성일</TableHeaderColumn>
</BootstrapTable>
)
}
태클 감사합니다.
조언 환영입니다.
질문도 환영입니다.