React UI 라이브러리 antd의 Table 컴포넌트에 대하여 알아봅니다. antd의 Table 컴포넌트는 테이블 형태의 Layout을 구현하는데 사용됩니다.

<Table />


그럼 간단한 사용 방법 및 예제를 먼저 알아봅니다.



# antd Table 컴포넌트 정보 및 예제
antd의 Table 컴포넌트를 사용하려면 기본적으로 아래의 props를 반드시 필요로 합니다.
dataSource // 테이블에 출력할 리스트 정보
columns // 테이블의 컬럼 정보를 표시합니다.
rowKey // [String | Function] unique Key 값을 설정합니다.
예를들어 아래는 간단한 예제 코드입니다. 먼저 dataSource에 필요한 정보로 siteList 배열값을 생성합니다.
const siteList = [
  {
    _id: { $oid: 'a1' },
    title: 'webisfree'
  },
  {
    _id: { $oid: 'a2' },
    title: '웹이즈프리'
  },
  ...
];

다음으로 컬럼 정보를 입력합니다.
const columns: any = [
  {
    title: 'ID',
    width: 100,
    render: text => {
      return text.hasOwnProperty('_id') ? (
        <a href={`/link/${text._id['$oid']}`}>{ text._id['$oid'] }</a>
      ): '';
    }
  },
  {
    title: 'Title',
    dataIndex: 'title',
    align: 'left'
  }
];

이제 위 코드를 아래와 같이 템플릿 파일에 작성합니다.
<Table
  rowKey={ item => { return item._id.$oid } }
  dataSource={siteList}
  columns={columns} />

위에서 rowKey prop은 unique한 key 값입니다. 문자열이나 함수를 사용할 수 있습니다. 위와 같이 사용한 이유는 맨 아래에서 확인할 수 있습니다.


! antd Table 컴포넌트의 Column 컬럼 사용하는 방법
컬럼을 사용하기 위해서 여러가지 값을 적용할 수 있습니다. 아래를 먼저 봐주세요.

  • title // 컬럼의 타이틀 로 출력될 내용
  • dataIndex // 컬럼의 value에 해당하는 값
  • width // 컬럼의 너비 width 값
  • key // Key 값을 설정하는데 필요
  • align // 정렬 기준의 값 'left | center | right'
  • render // 렌더링이 필요한 경우의 렌더링 함수

여기까지 컬럼 설정에 필요한 설정값을 알아보았습니다.



! MongoDB를 사용하는 경우 unique key 적용하기
만약 MongoDB를 사용하는 경우라면 Table에 아래와 같이 입력하여 unique key 에러를 피할 수 있습니다.

<Table
  rowKey={ item => { return item._id.$oid } }
 />

여기까지 antd 라이브러리 Table 컴포넌트에 대하여 알아보았습니다.