728x90
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>
)
}
728x90
'개인공부 > 코딩애플' 카테고리의 다른 글
[React1] class이용하기 (0) | 2023.06.13 |
---|---|
[React1] 각 따봉별로 개수증가하기 (1) | 2023.06.11 |
[React1]글제목변경되는 방법 (1) | 2023.06.11 |
[React1] map이용해서 반복 돌리기 (0) | 2023.06.11 |