React Hooks가 온 후 거의 Functional Component를 사용하기 시작했다.
인코딩할 때 기본 매개 변수 지정과children 지정은 비망록으로 남아 있기 때문에 어떻게 해야 합니까?
먼저 제목 부분과 속성 정의 부분의 예입니다.
속성은 생략할 수 없음Props과 속성은 생략할 수 있음PropsOptional을 정의했습니다.

import React from "react";
import { storiesOf } from "@storybook/react";

const s = storiesOf("Functional Component", module);

// 省略不可
type Props = {
  x: number;
  y: number;
};

// 省略可能のプロパティあり
type PropsOptional = {
  x?: number;
  y: number;
};

구성 요소의 사용 예시 부분은 Storybook을 사용합니다.
https://qiita.com/otanu/items/dd06d6702f673268c74e

props에서 매개 변수 정의

기본 모드.

const Ex = (props: Props) => {
  return (
    <div>
      {props.x}:{props.y}
    </div>
  );
};
s.add("Ex", () => <Ex x={1} y={2} />);

props에서 매개 변수 정의(선택 사항)

속성을 생략하기 위해 ? 를 추가하여 정의하면 x?: number | undefined 으로 정의됩니다.
속성undefined을 지정하지 않으면 undefined에 들어가기 때문에 처리해야 하기 때문에 undefined에 들어가도 상관없다.Object형 속성에서 이 방법을 호출할 때 명확하게 검사하지 않으면 오류가 발생하기 때문에 좀 번거롭다.

type PropsOptional = {
  x?: number;
  y: number;
};

const ExOptional = (props: PropsOptional) => {
  return (
    <div>
      {props.x === undefined ? "なし" : props.x}:{props.y}
    </div>
  );
};

s.add("ExOptional", () => (
  <>
    <ExOptional y={2} />
    <ExOptional x={1} y={2} />
  </>
));

정의defaultProps를 사용하면 기본값을 지정할 수 있습니다.만약 이런 방법이라면 속성Props을 생략할 수 없기 때문에 속성undefined을 정의할 수 없기 때문에 검사할 필요가 없다.

const ExOptional2 = (props: Props) => {
  return (
    <div>
      {props.x}:{props.y}
    </div>
  );
};
ExOptional2.defaultProps = {
  x: 1
};

s.add("ExOptional2", () => <ExOptional2 y={2} />);

만약 유형의 정의만 본다면 x는 생략할 수 없을 것 같아서 좀 메스꺼워요.
그러나 어셈블리를 사용할 때 VScode 보완 사항은 x? 로 표시되고 처리에서는 undefined 으로 표시되지 않습니다.
이거Props가 정답인 것 같은데?

매개변수 산열에서 정의

Functional Component의 정의 방법으로서도props 매개 변수의 정의가 아니라Hash를 사용할 수 있습니다.

const ExHash = ({ x, y }: Props) => {
  return (
    <div>
      {x}:{y}
    </div>
  );
};
s.add("ExHash", () => <ExHash x={1} y={2} />);

프로필을 일일이 지정하지 않아도 속성에 접근할 수 있고 매개 변수에 다음 기본값을 지정할 수 있는 점이 장점이다.

const ExHashOptional = ({ x = 10, y }: PropsOptional) => {
  return (
    <div>
      {x}:{y}
    </div>
  );
};
s.add("ExHashOptional", () => <ExHashOptional y={2} />);

속성을 모아 다른 구성 요소에 전달하는 경우 props 파라미터를 사용하고 간단한 구성 요소의 경우 Hash를 사용하여 이러한 구분을 지정합니다.

children 속성을 사용할 때

호출자로부터 서브어셈블리를 전달할 때 속성children의 속성을 정의합니다.
children을 생략할 수 있는 경우 children? 로 지정하면 됩니다.

type PropsWithChild = {
  x?: number;
  y: number;
  children: React.ReactNode;
};

const ExWithChild = ({ x = 10, y, children }: PropsWithChild) => {
  return (
    <div>
      {x}:{y}
      {children}
    </div>
  );
};

s.add("ExWithChild", () => (
  <ExWithChild y={2}>
    <p>子</p>
  </ExWithChild>
));

FunctionComponent 유형 React.FC(FunctionComponent) 을 사용하는 경우 추가로 유형 children 을 정의하지 않아도 됩니다.(사용 가능PropsOptional

const ExWithChildFC: React.FC<PropsOptional> = ({ x = 10, y, children }) => {
  return (
    <div>
      {x}:{y + 1}
      {children}
    </div>
  );
};

s.add("ExWithChildFC", () => (
  <>
    <ExWithChildFC y={2} />
    <ExWithChildFC y={2}>
      <p>子</p>
    </ExWithChildFC>
  </>
));