ENG
더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
React UI 라이브러리 antd의 Table 컴포넌트에 대하여 알아봅니다. antd의 Table 컴포넌트는 테이블 형태의 Layout을 구현하는데 사용됩니다.
<Table />
그럼 간단한 사용 방법 및 예제를 먼저 알아봅니다.
# antd Table 컴포넌트 정보 및 예제
antd의 Table 컴포넌트를 사용하려면 기본적으로 아래의 props를 반드시 필요로 합니다.
dataSource // 테이블에 출력할 리스트 정보
columns // 테이블의 컬럼 정보를 표시합니다.
rowKey // [String | Function] unique Key 값을 설정합니다. 예를들어 아래는 간단한 예제 코드입니다. 먼저 dataSource에 필요한 정보로 siteList 배열값을 생성합니다.
다음으로 컬럼 정보를 입력합니다.
이제 위 코드를 아래와 같이 템플릿 파일에 작성합니다.
위에서 rowKey prop은 unique한 key 값입니다. 문자열이나 함수를 사용할 수 있습니다. 위와 같이 사용한 이유는 맨 아래에서 확인할 수 있습니다.
! antd Table 컴포넌트의 Column 컬럼 사용하는 방법
컬럼을 사용하기 위해서 여러가지 값을 적용할 수 있습니다. 아래를 먼저 봐주세요.
여기까지 컬럼 설정에 필요한 설정값을 알아보았습니다.
! MongoDB를 사용하는 경우 unique key 적용하기
만약 MongoDB를 사용하는 경우라면 Table에 아래와 같이 입력하여 unique key 에러를 피할 수 있습니다.
여기까지 antd 라이브러리 Table 컴포넌트에 대하여 알아보았습니다.
<Table />
그럼 간단한 사용 방법 및 예제를 먼저 알아봅니다.
# antd Table 컴포넌트 정보 및 예제
antd의 Table 컴포넌트를 사용하려면 기본적으로 아래의 props를 반드시 필요로 합니다.
columns // 테이블의 컬럼 정보를 표시합니다.
rowKey // [String | Function] unique Key 값을 설정합니다.
const siteList = [
{
_id: { $oid: 'a1' },
title: 'webisfree'
},
{
_id: { $oid: 'a2' },
title: '웹이즈프리'
},
...
];
{
_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'
}
];
{
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={ 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 } }
/>
rowKey={ item => { return item._id.$oid } }
/>
여기까지 antd 라이브러리 Table 컴포넌트에 대하여 알아보았습니다.
react onClick 파라미터 값 전달하는 방법
