React로 동적으로 테이블 헤더와 데이터 렌더링

React를 사용하여 동적으로 테이블의 헤더와 데이터를 렌더링하는 방법을 알아보겠습니다. 예를 들어, 서버에서 받아온 데이터를 테이블로 표시할 때 헤더 및 데이터의 형태가 동적으로 변경될 수 있습니다. 이를 위해 React의 컴포넌트를 사용하여 유연하게 테이블을 구성하는 방법을 살펴보겠습니다.

요구 사항

1. React 컴포넌트를 사용하여 동적으로 테이블을 생성합니다.
2. 테이블의 헤더는 동적으로 받아와서 출력되어야 합니다.
3. 서버에서 받아온 데이터를 동적으로 테이블에 출력합니다.

예시 코드 설명

우선, 테이블의 헤더와 데이터를 렌더링하는 데 사용할 DynamicTable 컴포넌트를 작성하겠습니다. 이 컴포넌트는 헤더와 데이터를 받아와서 동적으로 테이블을 구성합니다.

import React from "react";
import styled from "styled-components";

const List = styled.div`
  align-self: stretch;
  height: 100%;
  border: 1px rgba(255, 255, 255, 0.1) solid;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
`;

const Hd = styled.div`
  align-self: stretch;
  padding-top: 16px;
  padding-bottom: 16px;
  background: rgba(255, 255, 255, 0.1);
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
  color: #f2f2f2;
`;

const Td = styled.div`
  align-self: stretch;
  border-bottom: 1px rgba(255, 255, 255, 0.1) solid;
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
`;

export function DynamicTable({ data, headers }) {
  return (
    <List>
      {/* 헤더 렌더링 */}
      <Hd>
        {headers.map((header, index) => (
          <div key={index}>{header}</div>
        ))}
      </Hd>

      {/* 데이터 렌더링 */}
      {data.map((item, index) => (
        <Td key={index}>
          {Object.keys(item).map((key) => (
            <div key={key}>{item[key]}</div>
          ))}
        </Td>
      ))}
    </List>
  );
}

위의 코드에서는 DynamicTable 컴포넌트를 생성하여 테이블을 동적으로 구성합니다. 이 컴포넌트는 data와 headers라는 props를 받아와서 테이블을 생성합니다. 헤더와 데이터를 렌더링할 때 styled-components를 사용하여 스타일을 적용하였습니다.

추가사항

<DynamicTable 
  headers={["순번", "이름", "나이", "성별"]} 
  data={[
    { number: 1, name: "John", age: 30, gender: "Male" },
    { number: 2, name: "Alice", age: 25, gender: "Female" },
    // 추가 데이터
  ]} 
/>

위의 코드는 "순번", "이름", "나이", "성별"의 헤더와 데이터를 출력합니다. 이렇게 동적으로 테이블을 구성하면서 유연하게 데이터를 표시할 수 있습니다.

기능 구현 및 작동 방식

위의 예시 코드를 통해 구현된 DynamicTable 컴포넌트는 헤더와 데이터를 동적으로 받아와서 테이블을 렌더링합니다. 이 컴포넌트는 다음과 같은 기능을 수행합니다.

1. 헤더 렌더링: headers props로 전달된 배열을 순회하면서 각 요소를 헤더로 출력합니다. 이를 통해 테이블의 열 제목을 동적으로 구성할 수 있습니다.

2. 데이터 렌더링: data props로 전달된 배열을 순회하면서 각 객체의 속성을 테이블의 셀로 출력합니다. 객체의 속성 개수에 따라 테이블의 열 수가 동적으로 조절됩니다.

이렇게 DynamicTable 컴포넌트는 받아온 데이터의 형태에 상관없이 유연하게 테이블을 구성할 수 있는 장점을 갖고 있습니다.

결론

1. 유연성: DynamicTable 컴포넌트는 데이터와 헤더를 동적으로 받아와서 테이블을 생성하기 때문에 데이터 형식이나 테이블 구조에 크게 제한을 받지 않습니다. 이는 다양한 형태의 데이터를 표시해야 할 때 매우 유용합니다.

2. 재사용성: 이 컴포넌트는 데이터를 받아와 테이블을 렌더링하는 역할을 수행하므로 여러 곳에서 재사용할 수 있습니다. 헤더와 데이터만 변경하면 다양한 형태의 테이블을 간편하게 생성할 수 있습니다.

3. 가독성: 컴포넌트의 구조가 명확하고 간단하기 때문에 코드를 이해하고 수정하기 쉽습니다.