props

props

부모 component의 state를 자식 component에서도 사용하려면 props로 전송해서 써야한다.

props 전송은 부모->자식 만 가능하다.

 

props로 부모>자식 state 전송하는 법

1. 부모 component 에서 <Modal 작명={state이름}>

2. 자식 component function에 props 파라미터 등록

 

function App(){
    let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '리액트 독학'])
    return (
    	<div>
        	<Modal title={title} />
        </div>
    )
}

function Modal(props){
    return (
        <div className="modal">
        	<h4>{ props.title[0] }</h4>
        </div>
    )
}

 

또는 자식 component에서 아래와 같이도 사용 가능하다.

function Modal ({title}){
	return (
    	<div className="modal">
        	<h4>{ title[0] }</h4>
        </div>
    )
}