[React1] props 이용방법

App 부모

Modal 자식

 

자식이 부모가 가지고 있던 state 사용가능  => props 이용하면된다!

부모->자식만 가능하다!!!

 

 

# 부모 -> 자식 state 전송하는 법

1. <자식컴포넌트 작명={state이름}>

2. props 파라미터 등록 후 props.작명 사용

 

<Modal 작명={글제목}/>


function Modal(props){
return(
<div className="modal">
<h4>{props.작명[0]}</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}

 

<Modal 글제목={글제목}/>


function Modal(props){
return(
<div className="modal">
<h4>{props.글제목[0]}</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}

---

props랑 style연결하기.

 

<Modal color={'yellow'} 글제목={글제목}/>
//<Modal color='yellow' 글제목={글제목}/>  이렇게도 된다!

function Modal(props){
return(
<div className="modal" style={{background : props.color}}>
<h4>{props.글제목[0]}</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}