[React] props.children

props.children 쓰는 이유 == 부모에서 자식 컴포넌트 props 전달

React에는 강력한 구성 모델이 있으며 구성 요소 간에 코드를 재사용하려면 상속 대신 구성을 사용하는 것이 좋습니다. - 공식 문서

코드 예시를 들어보겠습니다.
처음엔 props.children 다른 예시를 보아도 잘 모르겠어서 한참 헤맸습니다.

--부모 컴포넌트--

function test() {
  return (
    <>
       <Button props="props"/>
    </>
  );
}


--자식 컴포넌트--

function Button({props}) {
  return (
    <button className={props}/>
    )

요런 식으로 풀 수 있습니다.
위 코드를 활용하여
props에 클래스 네임과 버튼 텍스트를 전달해보겠습니다.
(부모에서 자식으로 props 전달)

--부모 컴포넌트--

function Test() {
  return (
    <>
      <Button style="primary-button" text="버튼"/>
    </>
  );
}

--자식 컴포넌트--

function Button({style, text}) {
  return (
    <button className={style}> {text}/>
    );
}

이렇게 코드를 짜면 자식 컴포넌트인 {style}에 부모 컴포넌트에서 넘어온 "primary-button"이 적용 됨. 자식 컴포넌트인 {text}에는 부모 컴포넌트에서 넘어온 "버튼"이 적용 됨.