[React] props : 부모가 가진 state를 자식에서 사용하고 싶을 때

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에서 들고와야한다.