props
상위 컴포넌트에서 하위 컴포넌트에 props로 데이터를 보낼 때 , 데이터의 이름을 직접 ( 수동 ) 설정해준다
props.children
컴포넌트의 사이에 하위 컴포넌트에 전달할 데이터를 적으면, 자동으로 props.children 안에 담겨서 전송된다.
예시코드
부모 컴포넌트
import Example from "../../../src/components/units/14-props-children-example";
export default function PropsChildrenPage() : JSX.Element{
return(
<div>
<div>+++++++++++++ 빨간색 파란색 초록색 ++++++++++++++++</div>
<Example school={"다람쥐초등학교"} >
<div>
<input type="text" />
<div>저는 철수입니다</div>
<button>클릭해주세요</button>
</div>
</Example>
<div>+++++++++++++ 빨간색 파란색 초록색 ++++++++++++++++</div>
</div>
)
}
자식 컴포넌트
interface IExampleProps {
school : string;
children : JSX.Element
}
export default function Example(props : IExampleProps){
return(
<div>
<div>안녕하세요 영희입니다</div>
<div>{props.school}</div>
<div>{props.children}</div>
<div>안녕하세요 맹구입니다</div>
</div>
)
}
결과
728x90
'Frontend 프론트엔드' 카테고리의 다른 글
[ 36 ] 컴포넌트 합성 (0) | 2024.06.27 |
---|---|
[ 35 ] 레이아웃 만들기 (0) | 2024.06.27 |
[ 33 ] Ant Design 모달창 만들기 실습 (0) | 2024.06.23 |
[ 32 ] ant design 별점 가져와서 사용해보기 (0) | 2024.06.23 |
[ 31 ] ant design UI 프레임워크 사용해보기 (0) | 2024.06.23 |