Props/State

컴포넌트의 하위 콘텐츠를 템플릿에 반영

props, children 프로퍼티를 사용하여 호출자 요소의 하위 콘텐츠 가져오기가 가능

image.png

속성의 특성상 여러 줄에 걸친 텍스트를 지정하기에는 적합하지 않음

정보를 묶어서 지정하려면 하위 콘텐츠로 넘겨주는 것이 좋음

image.png

style={{ ... }}를 사용하여 자식 요소에 스타일 적용

{children}을 포함하여 StyledPanel이 감싸는 내용을 그대로 출력

{children} 프로퍼티의 실체는 하위 콘텐츠를 나타내는 jsx 요소의 배열

image.png

StyledPanel 안의 {children} 자리에 <p>태그 내용이 들어감

해당 <p> 태그가 스타일이 적용된 <div> 안에 위치

여러 children 넘기기