Props

구현하는 기능과 배우는 컨셉

✔ props 사용하는 이유와 방법
✔ 모달창 props 기능추가해보기

Props를 왜 사용할까?

◾ 부모 컴포넌트 -> App
◾ 자식 컴포넌트 -> Modal
◾ 이때, Mdoal이라는 자식컴포넌트가 부모인 App이 가진 state를 사용하고싶다면 props로 꼭 전송해주어야한다.

Props 사용방법

function App (){
  return (
    <div>
      ...
      <Modal 글제목={글제목}></Modal>
    </div>
  )
}

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

◾ <자식컴포넌트 전송할 이름 = {state명}> 작성후
◾ 자식컴포넌트 선언하는 함수안에 파라미터를 하나 만든다 (props)
◾ 위의 예제를 보면 <Modal 전송할이름 = {state명}>
◾ 그리고 함수 Modal(props){} 파라미터에 props추가
◾ 그리고 이제 {props.전송할이름} 이렇게 사용하면된다.

참고) props라는 파라미터엔 전송한 모든 props 데이터가 들어가있다. 원하는 data만 꺼내서 사용할 수있다.

실제 제목 데이터 바인딩