예, 알고 있습니다. 점 표기법 구성 요소는 프로젝트에서 많이 사용되지 않습니다(라이브러리 제외). 일부 점 표기법 접근 방식을 포함하는 일부 레거시 또는 미개발 코드를 확인하기 어렵다는 것을 알았습니다. 그럼에도 불구하고 시대에 뒤떨어진 패턴은 아니며 전반적으로 매우 유용합니다. 뛰어들자

구성요소를 표기해야 하는 경우

여기에는 대부분이 없지만 내 개인적인 관점에서 올바른 사용은 필요한 부분(다른 구성 요소)을 사용하여 항상 스스로 "구성"하는 구성 요소에 대한 것입니다.

고전적인 예는 테이블입니다. 생각해 보십시오. 테이블에는 thead, tbody, th, tr 및 td가 있지만 해당 부분을 자체 구성 요소로 분리하거나 스타일을 추가하거나 일부 논리를 처리하고 싶을 수 있습니다. 쉽게 테스트할 수 있지만 테이블은 항상 이를 사용할 것입니다.

더 적게 가져오고 더 많이 수행

이러한 구성 요소의 경우 점 표기법을 사용하지 않으면 이름 지정을 사용하고 단일 파일에서 수행하려고 해도 가져오기가 긴 줄이 됩니다.
테이블과 모든 작은 부분 대신 테이블을 간단하게 가져오면 멋질 것입니다.

import {Table, Thead, Tbody, Col, Row} from './table'

대

import {Table} from './table'

타이프 스크립트 자동 완성

typescript를 사용하면(하지 않는 경우 수행) "Table"을 입력하여 지금 입력하므로 Table 구성 요소를 자동 완성하는 것도 쉽습니다. 표에 추가된 가능한 모든 표기법을 제안합니다.

빨리 해보자

import React from "react";
import "./styles.css";

type TableCmp = React.FunctionComponent & {
  Thead: React.FC;
  Tbody: React.FC;
  Row: React.FC;
  Col: React.FC;
};

const Table: TableCmp = ({ children }): JSX.Element => <>{children}</>;
const Thead: React.FC = ({ children }): JSX.Element => (
  <thead>{children}</thead>
);
const Tbody: React.FC = ({ children }): JSX.Element => (
  <tbody>{children}</tbody>
);
const Row: React.FC = ({ children }): JSX.Element => <tr>{children}</tr>;
const Col: React.FC = ({ children }): JSX.Element => <td>{children}</td>;

Table.Thead = Thead;
Table.Tbody = Tbody;
Table.Row = Row;
Table.Col = Col;

이를 필요한 컴포지션으로 추정하고 모든 구성 요소에 대한 유형을 쉽게 확장할 수 있습니다. 즐거운 코딩하세요!