[React] Component children 정리

※ component children

- component 참조를 한 사이에 HTML 데이터들은 그대로 사용 할 수 없다.
- 참조 당한 component에는 children이라는 예약어가 생기고 그걸 component에 위치시켜야지만 사용 가능 하다. 
EX)        

function Department() {
     return (
         <Layout name={'Department'}>
         ★★★<p>회사 조직소개 페이지 입니다.</p>★★★ 여기가 바로 children 부분
         </Layout>
     );
}

 

function Layout({ name, ★★★children★★★ }) {
    return (
        <section className={`content ${name}`}>
            <figure></figure>

            <div className='inner'>
            <h1>{name}</h1>
            ★★★{children}★★★
            </div>
        </section>
    );
}

☆주의사항 : Children과 children은 다름 (children으로 사용하여야 함)