children을 사용하여 ReactComponent를 Wrapper로 만드는 방법(Type Script 지원)

React 초보자 시절에 좀 혼란스러웠던 children에 대한 글을 쓰세요.

React에 대한 함수 Component

우선 리액트로 컴포넌트를 만들 때는 이렇게 써야 한다.
아니면 이렇게 써도 돼요.(이게 더 평범하고 인기가 많은 것 같아.)

const Button = (props) => {
  return (
    <button>
      {props.label}
    </button>
  );
};

둘 다 가능하고 후자는 분할 대입 수용 매개 변수의 형식으로 props 중의 label만 받아들인다.(전자는 시쓰기props.label와 props의 호출label의 형식이다.)
이 Component는 이렇게 사용됩니다.

const Button = ({ label }) => {
  return (
    <button>
      {label}
    </button>
  );
};

이것은'props 중의'label라는 이름押すなよ！絶対に押すなよ！의 텍스트로 당신에게 보낸 것입니다.

Wrapper 형식으로 함수 Component 사용

하지만 아래와 같이 시작 태그와 끝 태그를 사용해 Wrapper로 쓰는 경우도 있다.

const App = () => {
  return (
    <div>
      <Button label='押すなよ！絶対に押すなよ！' />
    </div>
  );
};

이렇게 쓰면 이른바 押すなよ！絶対に押すなよ！의 텍스트는 label가 아니라 props 중의 children와 이름이 버튼의 Component에 전달된다.
Buton의 Component를 다시 작성해야 합니다.

const App = () => {
  return (
    <div>
      <Button>
				押すなよ！絶対に押すなよ！
			</Button>
    </div>
  );
};

이렇게 하면 버튼의 Component는 Wrapper 형식으로 사용할 수 있다.

TypeScript의 경우

TypeScript의 경우 props에 유형을 추가할 수 있습니다.여기에 FC 및 VFC 를 추가 설명의 느낌으로 씁니다.

const Button = ({ children }) => {
  return (
    <button>
      {children}
    </button>
  );
};

FC의 형식에는 children이 포함되어 있기 때문에 특별한 설명이 필요 없고 Wrapper 형식으로 children을 사용할 수 있다.

import { FC } from 'react'

type Props = {
	/* 他のpropsの型 */
}

const Button: FC<Props> = ({ children, /* 他のprops */ }) => {
  return (
    <button>
      {children}
    </button>
  );
};

VFC의 유형에는 children이 포함되지 않기 때문에 위와 같이 스스로 정의해야 한다.
이런 Wrapper 형식의 표현은 독특하다.정식 명칭이 있으면 교수님을 모셔라🙇‍♂️