[React] 함수형 컴포넌트로 리액트 표 만들기 (table)

연구실 과제의 사용자 UI 개발 스택으로 리액트가 활용된다.

그래서 리액트를 공부해야하는데, 공부할게 많다. 막막했는데 webpack,babel 의 활용방법 이해 부터

props, state 의 구분과 활용, tree구조, lifecycle 등을 공부하니 react 코드의 맥락 파악은 가능해졌다.

이전에 html css 를 공부해놓으니까 js 부분만 열심히 파면 될 듯.

 

0. 특정 directory 에서 create-react-app 을 한 뒤, 필요없는 component들을 전부 지워준다.

 

 

1. ManageTable.js

import React, { useState, useEffect } from "react";
import { getManageApplication } from '../../Utils/api';
import TableRow from "./Table/TableRow";

const ManageTable = (props) => {
    const headerMeta = [
        "Instance",
        "App",
        "Status",
        "Blocked",
        "Stop",
    ];

    const [tableData, setTableData] = useState([getManageApplication(1)]);

    return (
        <>
        <h3>Manage Table</h3>
        <div>
            {tableData.length !== 0 && (
            <table>
                <thead>
                <tr>
                   {headerMeta.map(i=><th>{i}</th>)}
                </tr>
                </thead>
                <tbody>
                {tableData.map((d, i) => {
                    return (<TableRow key={i} data={d}/>);
                }
                )}
                </tbody>
            </table>
            )}
        </div>
        </>
    );
}

export default ManageTable;

함수형 컴포넌트로 만들 것이기 때문에 useState 를 사용해 State 들을 정의 한다.

useState 의 인자로는 api.js 에 있는

getManageApplication() 를 사용한다. 이 함수는 테이블 안의 데이터로 채워질 json data 를 전달하는 역할을 한다.

 

<tr>
	{headerMeta.map(i=><th>{i}</th>)}
</tr>

상수인 headerMeta list 에 속한 요소들을 map 함수를 통해 반복적으로 header 로 구현한다.

최대한 하드코딩을 막고 싶은 오기때문에 이렇게 했다.

 

 

2. TableRow.js

import React, { useState, useEffect } from "react";

const TableRow = ({ key, data}) => {
    const [RowData, setRowData] = useState(data);

    return (
        <>
        <tr key={key}>
            <td>{RowData.instance}</td>
            <td>{RowData.application}</td>
            <td> {(RowData.status)? "green":"red"} </td>
            <td>{(RowData.blocked)? "green":"red"}</td>
            <td>{(RowData.stop)? "green":"red"}</td>
        </tr>
        </>
    )
};


export default TableRow;

리액트의 장점은 컴포넌트화를 통한 코드 재사용 및 관리 용이가 꽤나 와닿는다.

테이블의 각 데이터들을 구현할 js 파일이다.

props 로 key와 data 를 받으면 그중 data를 state 로 넣고, 하나의 데이터 행을 렌더링한다.

 

 

2-2. api.js

export const getManageApplication = (userId) => {
  const result = {
    application: "Dummy Data",
    instance: "Dummy Data",
    status: "Dummy Data",
    interativeBlocked: false,
    PCList: "Dummy Data",
    stop: true,
    executor: "Dummy Data",
    executionTime: "Dummy Data",
  };

  return result
};

이 테이블에서는 api 서버를 통해 json data 를 받게 되고 그걸 보여준다는 가정이 있기 때문에 다음과 같이

api.js 로 따로 데이터를 받을 수 있도록 하게 두었다.

 

 

 

3. ManageTable.js 를 렌더링할 app.js 를 아래와 같이 편집한다.

import React from 'react';
import './App.css';
import TestPage from './ManageTable'

function App() {
  return (
    <ManageTable/>
  );
}

export default App;

이게 있어야 'npm start' 로 실행했을때, 만든 테이블이 렌더링 되게 된다.

 

결과물

 

여러개의 데이터를 띄워주고 싶다면 tableData 의 data 요소를 여러개 추가하면 된다.