React - props중 하나 'children'

react에서 대표적인 props중 하나로 children이 있다.

function Card({children}) {
    return (
        <div
            style={{
                backgroundColor: 'black',
                color: 'white',
                width: '200px',
                height: '200px',
                borderRadius: '20px',
                margin: '1rem',
                padding: '1rem',
                textAlign: 'center',
            }}
        >{children}</div>
    )
}

이와 같이 children을 props로 받아서 사용하고싶은 부분에 넣어주면 이 Card 컴포넌트를 틀, 컨테이너와 같은 용도로 사용할 수 있다.

<Card>
	<p>card1</p>
</Card>
<Card>
	<p>card2</p>
</Card>

이런 식으로 이후 Card컴포넌트를 호출하고 그냥 내부에 원하는 내용을 적어주면 자동으로 children으로 넘어가서 원하는 위치에 보여줄 수 있다.