React에서 Table 작업하기, 1부

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

개요

데이터를 보여주는 데 가장 흔히 쓰이는 UI 중 하나가 table 입니다. table로 작업할 때 다음과 같이 제어해야 할 측면이 많다는 것을 알게 됩니다.

column과 header 정의하기
다양한 cell 형식 (텍스트, 숫자, 체크박스)
크기 조절하기(resizing)
필터링하기
동적으로 크기 키우기(dynamic growing)
스타일링

여러분은 2부로 구성된 이 시리즈에서 React Bootstrap Table 컴포넌트를 사용해 React에서 표로 된 데이터를 작업하는 내용을 상세히 공부할 것입니다. 그리고 정교하고 전문적으로 보이는 table을 쉽고 자연스럽게 제작하며, 필요한 부분마다 원하는 대로 변경하게 될 것입니다.

Vanilla React 앱 제작하기

저는 여러분이 React를 잘 알고 있어서 React Bootstrap Table로 작업하는 데 집중하리라고 생각합니다. Envato Tuts+에는 여러분이 배경지식을 갖추기 위해 읽을 수 있는 React에 관한 훌륭한 글이 있습니다.

간단히 얘기하면, 저는 vanilla React 앱을 만드는 데 react-create-app을 사용했고 npm install react-bootstrap-table --save 명령어로 react-bootstrap-table을 설치했습니다.

public/index.html 파일에 bootstrap CSS를 추가하는 것이 중요합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                  initial-scale=1, 
                  shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!-- Latest compiled and minified bootstrap CSS -->
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/latest
                /css/bootstrap.min.css">

    <!-- bootstrap theme (Optional) -->
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/latest
               /css/bootstrap-theme.min.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

WebStorm

만약 여러분이 JetBrain의 WebStorm을 사용해 테스트를 돌리고 싶다면, run config에서 --env=jsdom을 추가하세요.

기본 Table

기본 table로 시작하겠습니다. 기본 table 컴포넌트가 아래에 있습니다. react-bootstrap-table에서 BootstrapTable과 TableHeaderColumn을, dist 디렉터리에서 CSS도 불러옵니다.

render() 메서드는 "ID"와 "Name", "Value" 3개의 column이 있는 table을 화면에 보여줍니다. table에 뿌려질 실제 데이터는 “data” 프로퍼티 (this.props.data)에서 옵니다. data에는 매우 재미있는 프로그램인 Arrested Development에 나오는 몇몇 인물의 이름이 들어 있습니다.

import React, { Component } from 'react';
import {BootstrapTable, 
       TableHeaderColumn} from 'react-bootstrap-table';
import '../css/Table.css';
import '../../node_modules/react-bootstrap-table/css/
        react-bootstrap-table.css'


class Table1 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}>
          <TableHeaderColumn isKey dataField='id'>
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'>
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'>
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

export default Table1;

저는 기본 App.js의 render() 메서드에 예제로 BasicTable을 작성하고 일부는 직접 짠 코드 데이터를 적용했습니다.

    import React, { Component } from 'react';
import './App.css';
import Table1 from './components/Table1'

var data = [
  {id: 1, name: 'Gob', value: '2'},
  {id: 2, name: 'Buster', value: '5'},
  {id: 3, name: 'George Michael', value: '4'}
];


class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        <Table1 data={data}/>
      </div>
    );
  }
}

export default App;

table을 보려면 npm start를 입력하세요. create-react-app에서 생성된 설정은 여러분이 작성한 코드를 주시하고, 어떤 변화가 생길 때마다 컴파일을 다시 실행합니다. 그러므로 여러분이 단 한 번만 시행하면 변경될 때마다 자동으로 반영할 것입니다.

Compiled successfully!

You can now view react-table in the browser.

  Local:            https://localhost:3000/
  On Your Network:  http://192.168.1.136:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

아래는 그 결과입니다.

Basic table output with three columns and rows

column의 너비가 모두 똑같다는 것을 눈여겨 보세요.

Column 작업하기

여러분은 column의 많은 속성을 제어할 수 있습니다. 특히 column width는 퍼센트와 같은 절대 단위로 명시되거나 명시하지 않은 채로 비워둘 수 있습니다. 명시하지 않은 column의 너비는 대등하게 나누고 남은 값이 됩니다. 예를 들어, 너비가 100px인 table에서 column 하나를 15px로 하고, 두 번째 column을 25% (25px)로, 세 번째 column을 30% (15px)로 명시했습니다.

다른 두 개의 column에는 너비를 적지 않았습니다. Column 1과 2, 3은 같이 70px을 사용합니다. 그로 인해 column 4와 5에는 30px이 남게 되며, 동등 분할될 것입니다. column 4와 5는 각각 15px의 너비를 갖습니다. 만일 table의 크기가 조절되면 그 수치들도 변한다는 점을 기억하세요. Column 1만 그 너비가 변함없이 15px이 됩니다.

나머지 column들은 table 너비를 기준으로 계산될 것입니다. 여러분은 header와 column의 스타일뿐만 아니라 text와 column의 정렬도 관리할 수 있습니다. 서로 다른 column width와 text 정렬, 커스텀 스타일을 작성하는 방법의 한 예가 아래에 있습니다.

import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn} from 
       'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


class Table2 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}>
          <TableHeaderColumn isKey
                             dataField='id'
                             dataAlign='center'
                             headerAlign="left"
                             width="30"
                             tdStyle={
                                 {backgroundColor: 'green'}}>
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
                             dataAlign='center'
                             headerAlign="center"
                             width="20%"
                             thStyle={
                                 {fontWeight: 'lighter', 
                                 color: 'red'}}>
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
                             dataAlign='center'
                             headerAlign="right">
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table2

Table 스타일 적용하기

여러분이 각각의 column을 스타일하는 방법을 알고 있더라도, 스타일을 적용하는 작업은 만만치 않습니다. React-bootstrap-table에 원하는 대로 변경 가능한 옵션이 많습니다. 먼저 row마다 다른 배경색을 적용하려고 BootstrapTable 컴포넌트에 선을 넣고 hover 속성을 간단하게 추가할 수 있습니다. <BootstrapTable data={this.props.data} striped hover>

전체 row에 스타일을 주려면, trClassName를 사용하세요. <BootstrapTable data={data} trClassName='tr-style'>

만약에 여러분이 진짜 잘 꾸미고 싶다면, trStyle이 함수를 쓰면 됩니다. “George Michael”이라는 이름이 있는 row에 다른 스타일을 주는 table 컴포넌트를 아래에서 확인해 보세요.

import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn} 
        from 'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


function rowClassNameFormat(row, rowIdx) {
  // row is whole row object
  // rowIdx is index of row
  console.log(row)
  return row['name'] === 'George Michael' ? 
    'GeorgeMichael-Row' : 'Other-Row';
}


class Table3 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data} 
                        trClassName={rowClassNameFormat}
        >
          <TableHeaderColumn isKey dataField='id'
          >
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
          >
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
          >
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table3

GeorgeMichael-Row와 Other-Row CSS 클래스는 Table.css에 정의되어 있습니다.

.Table-header {
    background-color: #ccc;
    color: blue;
    padding: 10px;
    text-align: left;
}


.GeorgeMichael-Row {
    background-color: plum;
}

.Other-Row {
    background-color: greenyellow;
}

Row 선택하기

일단 table에 데이터가 있다면, 그 데이터로 작업을 몇 가지 해보려고 row를 몇개 선택하고 싶을 것입니다. React-bootstrap-table에 폭넓고 다양한 선택옵션이 있습니다. 모든 옵션은 selectRow 속성으로써 컴포넌트에 전달할 단 하나의 객체에서 정리됩니다. 다음은 선택옵션 가운데 일부 항목들입니다.

단일선택 모드 (라디오 버튼)
다중선택 모드 (체크박스)
설정 가능한 column 선택 너비
row 클릭 선택: 기본적으로 셀렉터 (라디오 버튼이나 체크박스)를 클릭해야 함
선택 column 숨김 (row에서 클릭해서 true가 되면 유용함)
선택된 영역의 배경색 바꾸기
초기에 선택된 row
(단일 row나 전체 row가 선택되었을 때) 선택 힌트

다음의 컴포넌트들에서 이런 옵션들을 많이 보여주고 있습니다.

import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn} 
        from 'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


function onSelectRow(row, isSelected, e) {
  if (isSelected) {
    alert(`You just selected '${row['name']}'`)
  }
}

const selectRowProp = {
  mode: 'checkbox',
  clickToSelect: true,
  unselectable: [2],
  selected: [1],
  onSelect: onSelectRow,
  bgColor: 'gold'
};

class Table4 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data} 
                        selectRow={selectRowProp}
        >
          <TableHeaderColumn isKey dataField='id'
          >
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
          >
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
          >
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table4

결론

우리는 이 부분에서 react-create-app을 사용해 간단한 React 애플리케이션을 제작했고, React-bootstrap-table을 추가했습니다. 그리고 데이터를 넣은 table을 일반화하고, column 작업을 했으며, table에 스타일을 적용해 보았고 row를 선택해 보았습니다.

다음 튜토리얼에서는 row를 확장 및 추가, 삭제하고 페이지네이션(pagination)을 다루며, cell 편집과 고도의 커스터마이징을 하는 것으로 여행을 계속 하겠습니다.