[React] React 컴포넌트에서 부트스트랩 Table 사용하기: react-bootstrap-table

개발/React 2018. 7. 23. 17:02

react-bootstrap-table을 사용하려고한다.

react에서도 <table>로 코딩이 가능하지만, 좀 더 간편하게 npm이 제공된다.

간단하게 멋진 테이블 생성이 가능하다.

사용법은 홈페이지를 참고하자.

홈페이지

1. 터미널에 npm 설치한다.

$ npm i react-bootstrap-table --save

이렇게 설치를 한뒤, 컴포넌트.js에 들어가서... 사용하기 위해서

2. import를 해준다.

import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

!!!!!!!!!!!

오류 발생...

테이블이 아무리 해도 안 나온다.

데이터 리스트는 나오는데.... 왜 CSS 적용이 안 되는 것인가?

생각해보니 Bootstrap을 적용해야만 할 것 같은데 어떻게 적용할까?

1) public - index.html에 링크와 스크립트를 추가해준다. 당연히 <head> 태그 사이에..

그 다음에, 다시 실행하면?

적용된다!

기본 테이블 보여주는 코드는 다음과 같다.

 import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
 import './node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css';

 class Table extends React.Component {
    render() {
      return (
        <BootstrapTable data={ products }>
          <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
        </BootstrapTable>
      );
    }
  }

이렇게 하면, 기본 테이블이 예쁘게 커스텀되어 나온다.

그리고 다양한 기능들을 적용할 수 있다.

바로 이 사이트에서

참고로, 그냥 HTML 테이블 Table Tag로 그냥 만들고 싶다면 다음과 같이 작성하면 된다.

    render() {
        return (
            <div className="customers">
                <h2>Customers</h2>

                <table className="tablecss table">
                    <thead>
                        <tr>
                            <th>이름</th>
                            <th>나이</th>
                            <th>성별</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr key={customer.id}>
                            <td>HONG's</td>
                            <td>22</td>
                            <td>남자</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        );
    }

이렇게 하면, 테이블이 생성된다.

Bootstrap을 적용하는 방법은 상단에

import 'bootstrap/dist/css/bootstrap.min.css';
import './customers.css';

을 해주면 되고, 테이블을 꾸며주는 css 파일도 import하면 된다.

이렇게하면,

테이블 완성!

css파일에서 부를때는 class가 아니라 className임을 주의하자.

'개발 > React' 카테고리의 다른 글

[React] React에서 "key" prop 에러 && prop (2)	2018.07.31
React 설치 : create-react-app할 때 주의점 (0)	2018.07.27
[React] 리액트(React)의 주요 개념 - state에 대해 알아보자 (0)	2018.07.17
[React] 01) 리액트(React)는 무엇이며 왜 사용하는가? (0)	2018.07.07
[React] 리액트에서 이벤트(Event) 처리하는 방법에 대해.. (0)	2018.03.05