React 에서 테이블을 그리는 방법에 대해 알아보겠습니다.
const dumi = {
Variable1: {
statistic: [1.23],
p_value: [0.045],
parameter: [10],
method: ["t-test"],
},
Variable2: {
statistic: [2.34],
p_value: [0.012],
parameter: [20],
method: ["ANOVA"],
},
};
저는 다음과 같이 객체 내부에 데이터들이 정렬되었다고 가정하고 진행하겠습니다.
형식은 간단합니다.
Variable1 과 Variable2 라는 Key 를 가졌고, 이 Variable에 해당하는 각종 정보를 다시 한 번더 { }내부에 담는 겁니다.
import React, { useState, useEffect } from "react";
import "./Script.css";
const Script = () => {
const dumi = {
Variable1: {
statistic: [1.23],
p_value: [0.045],
parameter: [10],
method: ["t-test"],
},
Variable2: {
statistic: [2.34],
p_value: [0.012],
parameter: [20],
method: ["ANOVA"],
},
};
const keys = Object.keys(dumi);
return (
<div className="container">
<table>
<thead>
<tr>
<th>Variable</th>
<th>Statistic</th>
<th>p-value</th>
<th>Parameter</th>
<th>Method</th>
</tr>
</thead>
<tbody>
{keys.map((key) => (
<tr key={key}>
<td>{key}</td>
<td>{dumi[key].statistic[0]}</td>
<td>{Number(dumi[key].p_value[0]).toFixed(4)}</td>
<td>{dumi[key].parameter[0]}</td>
<td>{dumi[key].method[0]}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Script;
우선은 위와 같이 전체 코드를 구성할 수 있었습니다.
방법은 간단합니다.
const keys = Object.keys(dumi);
Object.keys 라는 method는 특정 객체의 key 값들을 리스트로 만들어줍니다.
dumi 데이터에는 Variable1 과 Variable2 라는 key 값이 있기 때문에 이 두개가 리스트로 들어가게 됩니다.
<table>
<thead>
<tr>
<th>Variable</th>
<th>Statistic</th>
<th>p-value</th>
<th>Parameter</th>
<th>Method</th>
</tr>
</thead>
<tbody>
{keys.map((key) => (
<tr key={key}>
<td>{key}</td>
<td>{dumi[key].statistic[0]}</td>
<td>{Number(dumi[key].p_value[0]).toFixed(4)}</td>
<td>{dumi[key].parameter[0]}</td>
<td>{dumi[key].method[0]}</td>
</tr>
))}
</tbody>
</table>
앞서 저장해둔 Keys 리스트를 순회하며 테이블의 body를 구성할 수 있었습니다.
<tr> </tr> 이 하나의 행이 되며, 행 내부에 첫 번째 <td> </td> 가 첫 번째 셀이 되는 겁니다.
여기서 3번째 셀에 해당하는 P_value 값은 Number 로 치환하고, toFixed(4) 를 이용해서 4번째 자리까지 나타나게 했습니다.
이런 식으로 key 를 통해 가져온 값을 알맞게 변형하여 표시도 가능합니다.
위 데이터를 통해 나타낸 테이블은 위와 같은 모양을 가지게 됩니다.
이번에는 테이블 배치를 달리 해봅시다.
방금은 key 값을 기준으로 해당 key가 가진 여러 값들을 가로로 표시하는 방식이었다면,
이번에는 열에 Key 값을 두고, 해당하는 데이터들을 세로로 표시할 겁니다.
import React from "react";
import "./Script.css";
const Script = () => {
const dumi = {
Variable1: {
statistic: [1.23],
p_value: [0.045],
parameter: [10],
method: ["t-test"],
},
Variable2: {
statistic: [2.34],
p_value: [0.012],
parameter: [20],
method: ["ANOVA"],
},
};
const keys = Object.keys(dumi);
return (
<div className="container">
<table>
<thead>
<tr>
<th></th>
{keys.map((key) => (
<th key={key}>{key}</th>
))}
</tr>
</thead>
<tbody>
<tr>
<td>Statistic</td>
{keys.map((key) => (
<td key={key}>{dumi[key].statistic[0]}</td>
))}
</tr>
<tr>
<td>P-value</td>
{keys.map((key) => (
<td key={key}>{Number(dumi[key].p_value[0]).toFixed(4)}</td>
))}
</tr>
<tr>
<td>Parameter</td>
{keys.map((key) => (
<td key={key}>{dumi[key].parameter[0]}</td>
))}
</tr>
<tr>
<td>Method</td>
{keys.map((key) => (
<td key={key}>{dumi[key].method[0]}</td>
))}
</tr>
</tbody>
</table>
</div>
);
};
export default Script;
앞서 말씀 드렸던 로직을 그대로 이용하되, 이번에는 tbody 의 내용을 다르게 배열하였습니다.
위와 같이 나타납니다.
이제 특정한 형태의 객체를 이용하여 테이블을 자체적으로 만들 수 있습니다.