모달 안에 상세 내용을 넣어주고 싶다
앱을 부모 컴포넌트
모달이 자식 컴포넌트
props로 자식에게 state 전해주는 법
1. <자식컴포넌트 작명={state명} />
2.자식 컴포넌트에서 props 파라미터 입력 후 사용
{
modal === true
? <Modal 작명={전송할state}/>
: null
}
function Modal(props){
return (
<div className="modal">
<h2>제목 { props.글제목[1] } </h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
props로 다같이 전송해야함.
=> 기본 props 원리는 Vue.js랑 동일하고
=> 대신 사실 부모 자식의 컴포넌트를 분명하게 구분하는 Vue.js가 개인적으로 props 다루는데 더 암기가 안됐다.
=> 그런데 차라리 바닐라 js 함수처럼 한 페이지에서 받아서 만드니 직관적으로 이해가 잘 된다.
=> 점차, js 프레임워크를 사용하는 이유와 Vue를 알고 있고 React를 익히고 있는 만큼 둘의 장단점을 점차 몸으로 느껴가고 있다.
=> 확실히 빠르게 사이트를 만들려면 Vue.js로 만드는게 좋지만 만약 바닐라js의 이해가 있는 사람이라면 오히려 React.js의 방식이 더 편할거라고 생각된다.