[react] props.children

props.children

🔠 컴포넌트에서 다른 컴포넌트를 담을 때 사용함
다른 컴포넌트를 담는 쉘의 역할을 할 수 있다.

//props.children을 사용한 컴포넌트 
function Card(props) {
 return <div className="card">{props.children}</div>;
}
export default Card;

//{props.children}에 담기는 컴포넌트 
import ExpenseItem from "./ExpenseItem";
import Card from "./Card";

function ExpenseBoard(props) {
  return (
    <Card> 
      <ExpenseItem  />
    </Card>
  );
}

export default ExpenseBoard;

🔠 props는 상속의 역할을 한다면, props.children는 합성의 역할을 한다.

어떤 컴포넌트가 자식 엘리먼트로 들어올지 예상할 수 없는 경우 props.children을 사용해 자식 엘리먼트를 그대로 전달하는 것이 좋다.

자식 엘리먼트에 사용할 컴포넌트를 import 시켜서 return시 <컴포넌트></컴포넌트>의 형식으로 사용해준다.