map함수를 이용한 테이블 생성

이번 프로젝트에서 테이블(표)가 많이 쓰이는데, 색이나 형식은 다 똑같아서
컴포넌트로 만들어서 테이블을 사용할 페이지에 import해오는 방식을 구현할 것이다.
전에 vue 프로젝트 할때는 v-for문을 사용했는데, react에서는 map 함수로 구현해야 한다.

유지보수와 재사용을 위해 보통 표는 컴포넌트로 따로 빼둔다음에 import로 불러와서 쓴다!

1] /components/Table.jsx

table 컴포넌트 생성하기.
난 styled components를 사용하므로 다음과 같이 이름을 지어줌.

import styled from "styled-components";

const TableContainer = styled.table`
  border: 1px solid #c4c4c4;
  border-collapse: collapse; //줄 합치기
  width: 506px;
`;
const Tr = styled.tr`
  border: 1px solid #c4c4c4;
  padding: 10px 5px;
`;
const FirstTd = styled.td`
  border: 1px solid #c4c4c4;
  padding: 10px 5px;
  width: 127px;
  background: #eceafe;
`;
const SecondTd = styled.td`
  border: 1px solid #C4C4C4
  padding: 10px 5px;
  width: 379px;
`;
const Table = ({ data }) => {
  return (
    <>
      <TableContainer>
        <tbody>
          {data.map((row, index) => (
            <Tr key={index}>
              <FirstTd>{row.title}</FirstTd>
              <SecondTd>{row.value}</SecondTd>
            </Tr>
          ))}
        </tbody>
      </TableContainer>
    </>
  );
};
export default Table;

2] page.jsx

table 컴포넌트를 사용할 페이지에 다음과 같이
데이터 배열을 입력하고 {}안에 넣어주면 완성.

const tableData = [
    {
      title: "전화번호",
      value: "김아무",
    },
    {
      title: "이메일",
      value: "김아무",
    },
  ];
  
  
return(
   <DataTable data={tableData} />
)

그럼 이렇게 내가 넣는 데이터 값에 따라 1행만 생기기도 하고 2행이 생기기도 하다!