#07-02. prop : children의 사용

children..?

props를 설명하는 글은 많지만 props 중 children을 설명하는 글을 본적이 없는것 같아서 작성하게 되었습니다.

리엑트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 prop가 children 입니다. 

 

Apps를 수정하여 알아보도록 하겠습니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props>내가 children이다 </Props>
    </div>
  );
}

export default App;

children을 표현할수 있도록 Props 를 수정합니다..

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        <hr/>
        <div>너는??? - {props.children}  </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
};