표(Table)을 만들 때 사용하는 코드 (2편)

표(Table)을 만들 때 사용하는 코드 (1편)

저번 포스팅에선 리턴해야 하는 결과물과 요건, 그리고 실제 구현을 위해 사용된 jsx 코드에 대해 살펴보았다.

 

이번 시간에는 TableTitle 컴포넌트와 Table컴포넌트를 살펴보자.

 

TableTitle 컴포넌트 코드는 다음과 같다.

// * WithChildren 인터페이스는 컴포넌트가 받을 수 있는 자식 요소에 대한 정보를 정의합니다.
interface WithChildren {
  //* 자식 요소는 있을 수도 있고 없을 수도 있으며 -> ?:
  //* ReactNode 타입 or FunctionComponent 타입 or ReactChildren 타입으로 정의됩니다.
  //* 참고로 ReactNode 타입은 ( ReactChild | ReactFragment | 
  // * ReactPortal | boolean | null | undefined ) 로 정의되어 있습니다.
  children?: React.ReactNode | React.FC | ReactChildren;
}

//* 표의 제목 위치에 들어가는 title 컴포넌트입니다.
//* TableTitle 은 FunctionComponent 타입이며, WithChildren 타입의 Props 를 받고 있습니다.
export const TableTitle: React.FC<WithChildren> = ({
  children,
}: WithChildren) => {
  // * Props 에서 children 을 가져옵니다.
  // * children 은 별도의 props로 넘길 수도 있고, jsx태그 사이에 넣으면 자동으로 children props로 처리됩니다.

  //* 저는 타이틀을 감싸는 태그로 h4태그를 사용하였으나, caption 태그가 권장됩니다.
  return <h4>{children}</h4>;
};

개인적으로 typescript에서 children을 props로 받을 일이 많기 때문에, WithChildren 인터페이스는 interfaces.ts에 두고 상황따라 import 후 기본 Props interface 에 extend 해서 사용하고 있다.

// * 테이블을 전체적으로 감싸는 Table 컴포넌트입니다.
export const Table: React.FC<WithChildren> = ({ children }: WithChildren) => {
  // * 마찬가지로 children을 받아서 table태그와 tbody태그로 감싸서 렌더링하는 역할을 해줍니다.
  return (
    <table style={{ display: "table", width: "100%" }}>
      <tbody>{children}</tbody>
    </table>
  );
};

Table 컴포넌트 역시 chidren을 받아서 내가 원하는 태그에 wrapping 후 렌더링 해주는 역할이 주 역할이라고 할 수 있다.

 

다음 시간에는 표 컴포넌트의 마무리이자 백미인 TableCell, TableRow 컴포넌트에 대해 이야기 해보자.