react table layout을 통해 table을 계속 만들지는 말아보자

TableLayout.jsx

import React from 'react';
import { TableContainer, Table, TableBody, TableCell,TableHead, TableRow, Paper } from '@material-ui/core';

export default function TableLayout({tableProps, tableHeaderData, data}){
    return(
        <TableContainer component={Paper}>
            <Table {...tableProps}>
            <TableHead>
                <TableRow>
                    {tableHeaderData.map((header,index)=>{
                        return(
                            <TableCell key={header+index}>{header}</TableCell>
                        )
                    })}
                </TableRow>
            </TableHead>
            <TableBody>
                {data.map((value,index)=>(
                    <TableRow key={index+'row'}>
                        {tableHeaderData.map((column,index)=>{
                            return(
                                <TableCell>{value[column]}</TableCell>
                            )
                        })}
                    </TableRow>
                ))}
            </TableBody>
            </Table>
        </TableContainer>
    )
}

mock data

export const mockHeaders = [
    'id',
    'name',
    'age'
];


export const mockBodies = [
    {id:'A man', name:'hoho', age:3},
    {id:'B woman', name:'SSH', age:111},
    {id:'C Dog', name:'CAR', age:1}
]

사용 시

<TableLayout tableHeaderData={mockHeaders} data={mockBodies}/>

같은 코드를 계속 그리지 말아보자