[ 34 ] props 와 props.children

 

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>
    )
}

 

결과