Children prop vs Attribute props

Children prop

children prop은 열림태그와 닫힘태그 사이의 내용을 전달 하고 사용하는데 사용한다

<TabButton>Components</TabButton>

다음과 같은 경우 TabButton 컴포넌트는 'Compoents'를 children prop으로 받게 된다
이때는 단순한 텍스트를 받고 있지만 필요에 따라 복잡한 JSX구조가 될 수 도 있다.

function TabButton({ children }) {
  return <button>{children}</button>;
}
``

위 코드는 다음과 같이도 사용 가능하다

function TabButton(props) {
  return <button>{props.children}</button>;
}

Attribute props

<TabButton label="Components"></TabButton>

function TabButton({ label }) {
  return <button>{label}</button>;
}

위와 같이 label 속성을 줘서 사용할 수도 있다.

두 방법 모두 사용 가능하고 어느 것이 더 낫다고 할 수 없고 개인의 선호도에 달려있다.