재사용 가능한 Table 컴포넌트 개발

기본적으로 html 에서 테이블의 구조는 이런식으로 생겼다.

      <table>
        <thead>
          <tr>
              <th>head 1</th> 👉 이부분1
              <th>head 2</th>
          </tr>
        </thead>
        <tbody>
            <tr>
                <td>table-row1-1</td> 👉 이부분2
	            <td>table-row1-</td>
            </tr>
            <tr>
                <td>table-row2-1</td>
	            <td>table-row2-2</td>
            </tr>
          ))}
        </tbody>
      </table>

리액트로 개발한다면 이부분1과 👉 이부분2를 map을 돌려 렌더시킬것이다.
그래서 이걸 코드로 옮기면 아래처럼 될것이다.

<table>
  <thead>
    <tr>
      {headers.map(header => (
        <th key={header}>{header}</th>
      ))}
    </tr>
  </thead>
  <tbody>
    {rows.map(columns => (
      <tr key={columns.id}>
        {columns.map(column => (
          <td key={column.key}>{column.children}</td>
        ))}
      </tr>
    ))}
  </tbody>
</table>

코드를 자세히 살펴보면 th 부분은 headers변수로 map을 실행하고
tr, td는 rows변수의 map 메서드를 실행한다.

그렇다. props로 이 둘을 받아오면 된다.
이를위한 Table의 인터페이스는 아래와 같다.

interface TColumn {
  id: string;
  columns: {
    render: React.ReactNode;
    key: string;
  }[]
}[]
interface TableProps {
  headers: string[];
  rows: TColumn;
}

rows가 조금 복잡해 보일지 몰라도 생각보다 간단하다.
테이블을 그릴려면 2차원 배열이 필요하다.

columns부터 살펴보면 key와 render속성이 보인다.
render는 테이블의 <td> 아래에 들어갈 노드를 넣어주며 된다.

rows는 id, columns가 보인다.
id는 tr을 그릴 떄 key로 쓸 값이고, columns는 위에서 만든 가로줄의 모임이다.

테이블 그리기

그래서 테이블을 그려주고싶다면 이제 아래처럼 Table 컴포넌트를 사용하면 된다.

  const headers = ['아이템', '아이템2'];
  const rows: TColumn[] = [
    {
      id: '첫번째행',
      columns: [
        {
          key: '첫번째 열',
          render: <span>안녕!</span>,
        },
        {
          key: '두번쨰 열',
          render: <span>테이블!&</span>,
        },
      ],
    },
    {
      id: '두째행',
      columns: [
        {
          key: '첫번째 열',
          render: <span>나는!</span>,
        },
        {
          key: '두번쨰 열',
          render: <span>테이블2!</span>,
        },
      ],
    },
  ];
const CalendarPage = () => {
  return (
    <>
      <Table 
        headers = {headers}
        rows = {rows}
      />
    </>
  );
}

이렇게 코드를 작성해주면
아래처럼 테이블형태로 그려지는걸 확인할 수 있다!

끗

아직 스타일을 지정 안해줘서 예쁜 테이블 모양이 아니지만
스타일을 지정해주면 원하는 테이블 모양을 만들 수 있다.
끗.