props

자식 컴포넌트가 부모 컴포넌트의 state를 가져다 사용하고 싶은 경우엔 props를 사용해야한다.

컴포넌트에 데이터바인딩하기

부모 컴포넌트의 state를 자식이 사용하기 위해선 props를 사용하여 state를 자식 컴포넌트로 전송해주어야한다.

props 사용방법

1. <자식컴포넌트 전송할이름={state명}> 작성
2. 함수 소괄호 내에 파라미터를 하나 추가
   function Modal(props){}
3. props.전송할이름 을 작성하면 사용 가능

function App (){
  let [글제목, 글제목변경] = useState( ['JSX란', 'state사용하기', 'deepcopy'] );
  return (
    <div>
      ...
      <Modal 글제목={글제목}></Modal>
    </div>
  )
}

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