웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > react

antd Table 컴포넌트 체크박스 사용 방법 및 예제

Last Modified : 2023-10-15 / Created : 2020-12-18
9,322
View Count

antd 라이브러리의 Table 컴포넌트를 사용하면 리스트 형태의 데이터를 테이블로 출력할 수 있습니다. 만약 테이블에 체크박스를 사용하려면 어떻게 하는지 방법을 알아봅니다.

추가로 체크박스를 사용하여 전체 선택 및 전체 해제 방법도 함께 알아봅니다.




# antd Table 컴포넌트 체크박스 사용하기


테이블에 체크박스를 사용하여 선택하는 방법은 많이 사용됩니다. 원하는 row만 선택하거나 해제할 수도 있고 전체선택하거나 전체 해제하는 것 역시 가능하죠.


! 만약 Table에 체크박스를 사용하려면?


Table 컴포넌트는 기본 설정이 체크박스를 사용하지 않도록 되어 있으므로 만약 체크박스를 사용하려면 옵션 설정이 필요합니다. 이때 필요한 옵션값은 바로 rowSelection, rowKey니다.
import { Table } from 'antd';

render () {
  return (
    <Table
      rowSelection={}
      rowKey={}
      ...
    />
  )
}

위 코드를 보면 Table에 rowSelection을 사용하였음을 알 수 있죠. 이렇게 rowSelection, rowKey를 props에 추가하면 체크박스가 나타나게 됩니다. 참고로 antd 버전에 따라 체크박스 구현에 차이가 있을 수 있으니 참고하세요.

먼저 rowSelection은 객체값이며 선택된 row를 저장할 배열값옵션을 설정할 수 있습니다. 그리고 rowKey의 경우 선택된 row의 어떤 값을 저장할 것인지 기준이 되는 값을 말합니다. 예를들어 'id'로 rowKey를 설정할 경우 선택된 값에는 id가 배열로 저장됩니다. 그러면 아래에서 간단한 예제 코드를 알아봅니다.


! antd Table 컴포넌트 체크박스 사용 예제보기


다음의 코드는 체크박스가 적용된 Table 컴포넌트 예제코드입니다. 먼저 rowKey와 rowSelection이 있는 Table 코드를 잠시 살펴볼께요.
constructor(props) {
  super(props);
    this.state = {
      selectedRowKeys: []
    }
  }

  onSelectChange = (selectedRowKeys: any) => {
    this.setState({
      selectedRowKeys
    });
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: this.onSelectChange
  };

(생략 ...)

<Table
  rowSelection={rowSelection}
  rowKey={'id'}
  ...
/>

위의 코드를 보면 rowKey로 'id'가 설정되어 있습니다. 즉 테이블의 row를 선택시 onChange의 콜백으로 등록된 onSelectChange 함수를 호출합니다. 여기서 해당하는 row의 id값이 저장되는데 이때 state로 선언된 selectedRowKeys에 저장되죠. 이 부분이 가장 중요한 부분입니다. 위와 같이 테이블의 row가 선택시 어떤 과정으로 진행되는지 잘 알아두어야 합니다.

아래는 예제로 만들어본 myList 컴포넌트의 전체 코드입니다.
class myList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRowKeys: [],
      mySites: [] // 사이트 목록의 데이터(여기서는 생략)
    }
  }

  onSelectChange = (selectedRowKeys: any) => {
    this.setState({
      selectedRowKeys
    });
  };

  render() {
    const columns: any = [
      {
         title: 'ID',
         dataIndex: 'id',
      },
      {
        title: '내용',
        dataIndex: 'contents',
       }
    ];

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };

    return (
      <Table
        rowSelection={rowSelection}
        rowKey={'id'}
        dataSource={this.state.mySites}
        columns={columns}
      />
    )
  }
}

여기까지 antd 라이브러리의 Table 컴포넌트에서 체크박스(Checkbox)를 사용하는 방법에 대하여 알아보았습니다.


! 마치면서

참고로 위의 코드를 보면 선택된 row의 모든 id가 selectedRowKeys에 저장된다는 사실을 알 수 있습니다. 이때 저장된 값은 해당하는 rowKey값인 id만 저장되어 있죠. 만약 사용된 데이터에서 id값만이 아닌 선택된 row의 전체 객체 값이 필요하다면? 이런 경우 id가 포함된 값을 컬렉션 안에서 추가로 찾는 과정이 필요합니다. for 등의 루프문을 사용 후 배열 메소드 중 하나인 내장함수 filter() 등을 사용하여 찾을 수 있겠죠.

Previous

antd Input 태그에 focus 이벤트 사용하기