Antd Table render row item값 구하기

ANTD 라이브러리로 Table을 만들었다.

테이블의 한 행마다 각각의 요소들이 있고, 

그 요소를 클릭하면 그 값을 이용해서 api의 파라미터로 넘겨야 했다. 

 

  const [dataState, setDataState] = useState<KeyArr[]>();
  
    interface KeyArr {
    anatdelProductSeq: number;
    anatdelProductSumUri: string;
    anatdelProductName: string;
    anatdelProductCategory1En: string;
    anatdelProductCategory2Kr: string;
    anatdelProductUseYn: string;
  }
  
  // 여기서 Data는 api 조회로 가져온 Data이다. 
  
  useEffect(() => {
    const keyArr = Data?.map((data, index) => {
      return {
        anatdelProductSeq: data.anatdelProductSeq,
        anatdelProductSumUri: data.anatdelProductSumUri,
        anatdelProductName: data.anatdelProductName,
        anatdelProductCategory1En: data.anatdelProductCategory1En,
        anatdelProductCategory2Kr: data.anatdelProductCategory2Kr,
        anatdelProductUseYn: data.anatdelProductUseYn,
        key: index,
      };
    });
    setDataState(keyArr);
  }, [Data]);
  
  
  // 테이블 컬럼 부분
  
    const columns = [
    {
      title: 'Num',
      dataIndex: 'anatdelProductSeq',
      key: 'anatdelProductSeq',
      width: 20,
    },
    {
      title: '활성화 유무',
      dataIndex: 'anatdelProductUseYn',
      key: 'anatdelProductUseYn',
      render: function (text, record, anatdelProductUseYn) {
        return (
          <Switch
            id="switch"
            checkedChildren={record.anatdelProductUseYn === undefined ? 'Y' : record.anatdelProductUseYn}
            unCheckedChildren="N"
            defaultChecked={record.anatdelProductUseYn === 'N' ? false : true}
            onChange={(checked: boolean, event: Event) => ConfirmAccess(record)}
          />
        );
      },
    },
]
  // 컴포넌트 부분
return( 

<Table
        columns={columns}
        rowSelection={rowSelection}
        rowKey={record => record.anatdelProductSeq}
        dataSource={dataState}
        loading={loading}
        onChange={onChange}
        pagination={{ pageSize: 20 }}
      />

핵심은 이 부분이다. 

render에 text, record 를 넣어준다.

antd 라이브러리가 좀 힘든점은 공식문서를 읽지않으면

영영 미궁으로 빠질 수 있단 점이다. 

 

column의 render에서 record로 값을 가져다 쓰자. 

그러면 각 데이터마다의 값을 record로 가져다가 쓸 수 있다. 

{
      title: '활성화 유무',
      dataIndex: 'anatdelProductUseYn',
      key: 'anatdelProductUseYn',

      render: function (text, record, anatdelProductUseYn) {
        return (
          <Switch
            id="switch"
            checkedChildren={record.anatdelProductUseYn === undefined ? 'Y' : record.anatdelProductUseYn}
            unCheckedChildren="N"
            defaultChecked={record.anatdelProductUseYn === 'N' ? false : true}
            onChange={(checked: boolean, event: Event) => ConfirmAccess(record)}
          />
        );
      },
    },