리액트(react)-props

<Modal> 안에 실제 내용을 데이터바인딩하려면?

function App(){} 안에 있는 "글제목" 을
function modal(){} 에 갖다 쓰고 싶다면

props

가 필요하다.

App()은 부모 컴포넌트,
modal()은 자식 컴포넌트라고 한다.

props를 통해 App(){}이 가진 state를 쓸 수 있게 전송한다.

<Modal 이름작명 = 전송받을 state></Modal>

즉, 아래와 같이 작성

<Modal 글제목={글제목}></Modal>

의 형태

---

부모컴포넌트의 내용을 props에 담아 자식컴포넌트에 전송한다 생각하면 된다.

자식컴포넌트의 파라미터에 props를 입력해준다.

function App(){
 return( ...
  {modal === true ? <Modal 글제목={글제목}></Modal> : null}
)}
...
...


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