React 및 Typescript를 사용하여 사용자 정의 테이블 구성 요소를 만드는 방법(2부)

소개

야! ? 두 부분으로 구성된 이 시리즈의 마지막 부분에 도달하셨습니다! 파트 1을 아직 확인하지 않으셨다면 여기서 잠시 멈추고 먼저 파트 1을 살펴보세요. 걱정하지 마세요. 당신이 돌아올 때까지 기다리겠습니다! ?

1부에서는 CustomTable 구성요소를 구축했습니다. 여기에서 실제로 작동하는 모습을 볼 수 있습니다.

이 두 번째 부분에서는 구성 요소를 확장하여 몇 가지 새로운 기능을 추가할 것입니다. 우리가 노력할 내용은 다음과 같습니다.

이를 지원하려면 CustomTable 구성 요소에 몇 가지 개선 사항이 필요합니다.

1. 렌더링된 값의 형식을 지정하는 기능(예: 적절한 형식으로 숫자 렌더링)
2. 사용자가 행 렌더링을 위한 맞춤 템플릿을 제공하여 각 열이 표시되는 방식을 제어할 수 있는 유연성.

첫 번째 기능 구축에 대해 살펴보겠습니다.

열 인터페이스 확장

특정 열이 해당 값을 렌더링하는 방법을 제어하기 위해 Column 인터페이스에 형식 메서드를 추가하는 것부터 시작하겠습니다.

interface Column<T> {
  id: keyof T;
  label: string;
  format?: (value: string | number) => string;
}

이 선택적 형식 방법은 필요한 경우 데이터 형식을 지정하는 데 사용됩니다. Country.tsx 파일의 예를 통해 이것이 어떻게 작동하는지 살펴보겠습니다. 모집단 열에 형식 지정 방법을 추가하겠습니다.

const columns: Column<Country>[] = [
  { id: "name", label: "Name" },
  { id: "code", label: "ISO\u00a0Code" },
  {
    id: "population",
    label: "Population",
    format: (value) => new Intl.NumberFormat("en-US").format(value as number),
  },
  {
    id: "size",
    label: "Size\u00a0(km\u00b2)",
  },
  {
    id: "density",
    label: "Density",
  },
];

여기에서는 JavaScript Intl.NumberFormat 메서드를 사용하여 모집단의 형식을 숫자로 지정합니다. 여기에서 이 방법에 대해 자세히 알아볼 수 있습니다.

다음으로 CustomTable 구성 요소를 업데이트하여 형식 기능을 확인하고 존재하는 경우 적용해야 합니다.

<TableBody>
  {rows.map((row, index) => (
    <TableRow hover tabIndex={-1} key={index}>
      {columns.map((column, index) => (
        <TableCell key={index}>
          {column.format
            ? column.format(row[column.id] as string)
            : (row[column.id] as string)}
        </TableCell>
      ))}
    </TableRow>
  ))}
</TableBody>

이번 수정으로 이제 인구 열이 적절한 형식으로 렌더링됩니다. 여기에서 실제로 작동하는 모습을 볼 수 있습니다.

사용자 정의 템플릿 지원

이제 다음 기능인 ​​열 렌더링을 위한 맞춤 템플릿 허용을 구현해 보겠습니다. 이를 위해 JSX를 하위 소품으로 전달하거나 렌더링 소품을 사용하는 지원을 추가하여 소비자가 각 셀이 렌더링되는 방식을 완전히 제어할 수 있도록 할 것입니다.

먼저 선택적인 하위 소품을 포함하도록 Props 인터페이스를 확장하겠습니다.

interface Props<T> {
  rows: T[];
  columns: Column<T>[];
  children?: (row: T, column: Column<T>) => React.ReactNode;
}

다음으로 기존 동작을 유지하면서 이 새로운 prop을 지원하도록 CustomTable 구성 요소를 수정하겠습니다.

<TableRow>
  {columns.map((column, index) => (
    <TableCell key={index}>
      {children
        ? children(row, column)
        : column.format
        ? column.format(row[column.id] as string)
        : row[column.id]}
    </TableCell>
  ))}
</TableRow>

이렇게 하면 children 소품이 전달되면 맞춤 템플릿이 사용됩니다. 그렇지 않으면 기본 동작으로 돌아갑니다.

또한 재사용이 가능하도록 코드를 리팩토링해 보겠습니다.

const getFormattedValue = (column, row) => {
  const value = row[column.id];
  return column.format ? column.format(value) : value as string;
};

const getRowTemplate = (row, column, children) => {
  return children ? children(row, column) : getFormattedValue(column, row);
};

사용자 정의 행 구성 요소

이제 Countries.tsx 파일에 사용자 정의 행 구성 요소를 만들어 보겠습니다. 특수 렌더링 로직을 처리하기 위해 CustomRow 구성 요소를 생성하겠습니다.

interface RowProps {
  row: Country;
  column: Column<Country>;
}

const CustomRow = ({ row, column }: RowProps) => {
  const value = row[column.id];
  if (column.format) {
    return <span>{column.format(value as string)}</span>;
  }
  return <span>{value}</span>;
};

그런 다음 Countries.tsx를 업데이트하여 이 CustomRow 구성 요소를 CustomTable에 전달합니다.

const Countries = () => (
  <CustomTable columns={columns} rows={rows}>
    {(row, column) => <CustomRow column={column} row={row} />}
  </CustomTable>
);

특별한 템플릿이 필요하지 않은 People.tsx의 경우 children 소품 없이 간단히 테이블을 렌더링할 수 있습니다.

const People = () => <CustomTable columns={columns} rows={rows} />;

개량

우리가 할 수 있는 한 가지 개선점은 배열 인덱스를 키로 사용하는 것인데, 이로 인해 문제가 발생할 수 있습니다. 대신 각 행에 고유한 rowKey를 사용하도록 적용해 보겠습니다.

rowKey를 요구하도록 Props 인터페이스를 확장할 예정입니다.

interface Props<T> {
  rowKey: keyof T;
  rows: T[];
  columns: Column<T>[];
  children?: (row: T, column: Column<T>) => React.JSX.Element | string;
  onRowClick?: (row: T) => void;
}

이제 CustomTable의 각 소비자는 안정적인 렌더링을 보장하기 위해 rowKey를 제공해야 합니다.

<CustomTable
  rowKey="code"
  rows={rows}
  onRowClick={handleRowClick}
  columns={columns}
>
  {(row, column) => <CustomRow column={column} row={row} />}
</CustomTable>

최종 코드

여기에서 전체 코드를 확인하세요.

결론

이 문서에서는 형식 지정 옵션과 열에 대한 사용자 정의 템플릿을 전달하는 기능을 추가하여 사용자 정의 CustomTable 구성 요소를 확장했습니다. 이러한 기능을 사용하면 테이블에서 데이터가 렌더링되는 방식을 더 효과적으로 제어할 수 있을 뿐만 아니라 다양한 사용 사례에 맞게 구성 요소를 유연하고 재사용할 수 있습니다.

또한 배열 인덱스를 키로 사용하지 않도록 rowKey prop을 적용하여 구성 요소를 개선하여 보다 효율적이고 안정적인 렌더링을 보장했습니다.

이 가이드가 도움이 되었기를 바랍니다! 댓글 섹션에서 여러분의 생각을 자유롭게 공유해 주세요.

이 여행 내내 함께 해주셔서 감사합니다! ?

위 내용은 React 및 Typescript를 사용하여 사용자 정의 테이블 구성 요소를 만드는 방법(2부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!