props란?
부모 컴포넌트에서의 state를 자식 컴포넌트에서 사용하려고 할 때
{부모에 있는 state이름} 이렇게 대충 들고올 수 없다.
props 문법을 이용해서 전송해 줄 수 있다.
props로 자식에게 state 전달해주는 방법
1 <자식 컴포넌트 작명 = {state명}/>
{
modal === true
? <Modal 글제목={글제목}/>
: null
}
보통 작명은 state명과 똑같이 해주는 편이다.
2 자식 컴포넌트에서 props 파라미터 입력 후 사용한다.
function Modal(props){
return(
<div>
<h2> 제목 {props.글제목}></h2>
<p>날씨</p>
<p>상세내용<p>
</div>
)
}
사용할 때는 {props.글제목} 이런식으로 props에서 들고와야한다.
반응형
'Frontend > React' 카테고리의 다른 글
[React] 객체화 시키기 - Component (0) | 2021.08.16 |
---|---|
[React] 제목을 누를 때 각각 다른 UI가 나오도록 하기. (0) | 2021.07.22 |
[React] map()/ for 반복문 (0) | 2021.07.22 |
[React] IF문 삼항연사자/ 클릭하면 동작하는 UI 창 만들기 (0) | 2021.07.22 |
[React] ReactDom.render (0) | 2021.07.22 |