[React] Data Select

---

How can we select in react?

(어떻게 조회할까 리액트에서?)

---

Method

import 'semantic-ui-css/semantic.min.css';
import React, { useState } from 'react';
import { Table } from 'semantic-ui-react';
import { HttpRequest } from '@utils/Http';
import { useLayoutEffect } from 'react';

interface DataRow {
  ID: number;
  TITLE: string;
  ATTACH_FILE: string;
  NAME: string;
  REGIST_DATE: string;
  manualData: DataRow[];
}

const ManualTable = () => {
  const [manualData, setManualData] = useState<DataRow[]>([]);

  const getData = async () => {
    const response = await HttpRequest('download/manual/');
    setManualData(response.body.items);
  };

  /* useLayoutEffect는 랜더링 이후 작동하기에 웹에서 더 부드러운 화면이 나타난다.  */
  useLayoutEffect(() => {
    getData();
  }, []);
  return (
    <div>
      <Table celled className="{ui blue table}" style={{ textAlign: 'center' }}>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell style={{ width: '5%' }}>번호</Table.HeaderCell>
            <Table.HeaderCell style={{ width: '55%' }}>제목</Table.HeaderCell>
            <Table.HeaderCell style={{ width: '10%' }}>첨부파일</Table.HeaderCell>
            <Table.HeaderCell style={{ width: '10%' }}>작성자</Table.HeaderCell>
            <Table.HeaderCell style={{ width: '20%' }}>등록일</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {manualData.map((item, index) => (
            <Table.Row key={index}>
              <Table.Cell>{item.ID}</Table.Cell>
              <Table.Cell>{item.TITLE}</Table.Cell>
              <Table.Cell>{item.ATTACH_FILE}</Table.Cell>
              <Table.Cell>{item.NAME}</Table.Cell>
              <Table.Cell>{item.REGIST_DATE}</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    </div>
  );
};

export default ManualTable;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

To be continued..