App이 부모 컴포넌트, Modal이 자식 컴포넌트일 때, 자식 컴포넌트가 부모 컴포넌트 안에 있던 state를 쓰고자 할 때 props를 사용한다.
props는 immutable하다.
props 사용법
<Modal 전송할이름={state명}> 를 전송하면 props 가 전송된다.function Modal(props){} Modal 함수 소괄호 내에 파라미터를 하나 추가해준다.props.전송할이름**으로 전송된 props를 사용한다.function App (){
let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
return (
<div>
<Modal 글제목={글제목}></Modal>
</div>
)
}
function Modal(props){
return (
<div className="modal">
<h2>제목 { props.글제목[0] }</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
참고 사항
참고1) props는 <Modal 이런거={이런거} 저런거={저런거}>로 무한히 사용 가능하다.
참고2) props 전송할 땐 꼭 {} 중괄호 사용은 필수가 아니다.
<Modal 글제목={변수명}> 하지만 일반 텍스트일 경우에는 <Modal 글제목="강남우동맛집"> ****따옴표 써도 된다.[기존 UI 변경 방식]
모달창이 현재 보이는/보이지않는 상태정보를 state로 저장한다.
state가 true/false에 따라 모달창을 숨기거나 보여준다
ex) 제목을 클릭하면 이에 맞춰 모달창이 띄워진다.
function App (){
let [글제목인덱스, 글제목인덱변경] = useState(0);
return (
<div>
<button onClick={()=>{ 글제목인덱스(0) }}>버튼1</button>
<button onClick={()=>{ 글제목인덱스(1) }}>버튼2</button>
<button onClick={()=>{ 글제목인덱스(2) }}>버튼3</button>
</div>
)
}
props.글제목[글제목인덱스] 의 글제목 인덱스 따라 n번째 글제목을 보여준다.2-1. props를 사용하기 위해서 props를 전송해야 된다.
<Modal>이라는 태그 안에서 원하는 이름의 props를 전송한다.
모달 안에서 props.이름 형태로 사용한다.
function Modal(props){
return (
<div className="modal">
<h2>제목 { props.글제목[props.글제목인덱스] }</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
2-2. 글제목 인덱스 따라 n번째 글제목을 보여준다.
function App (){
return (
<div>
...
{ 글제목.map(function(a, i){
return (
<div className="list">
<h3 onClick={ ()=>{ 누른제목변경(i) } }>{ a } <span>?</span> </h3>
<p>2월 18일 발행</p>
<hr />
</div>
}) }
</div>
)
}
참고 문헌