10. props를 응용한 상세페이지 만들기

Q. 지금 누른 글제목이 모달창안에 뜨게 하고 싶으면 어떻게 코드를 짜야할까요?

<동적인 UI 만들기> 참고!!

1. html css 만들기

2. 현재 UI의 상태를 state로 만들기

let [titleNum, setTitleNum] = useState(0);

function App(){} 안에 state 하나 만든다.

모달창 안의 글제목은 0번글이 보이거나 1번글이 보이거나 2번글이 보이기 때문에 숫자로 표현.

3. state 종류에 따라서 UI가 어떻게 보일지 작성

function App (){
  	// 1. titleNum 생성
	let [titleNum, setTitleNum] = useState(0);
  
	(생략)
  
	{
		title.map(function(a, i) {
			return (
        	<div className="list" key={i}>			// 2. setTitleNum을 사용하여 title 0,1,2로 변경
				<h4 onClick={()=>{ setModal(true); setTitleNum(i); }}> { title[i] }
				</h4>
				<p>{ date[i] }</p>
			</div>
			)
		})
	}

	<div>
	    <h1>{modal}</h1>
	</div>

	{																			// 3. setTitleNum으로 변경한 titleNum을 자식에게 전달.
		modal == true ? <Modal color={'yellow'} title={title} setTitle={setTitle} titleNum={titleNum}/> : null
	}
}

function Modal(props){
  return (
    <div className="modal">
	  {/* 4. titleNum(0, 1, 2)으로 title을 설정. */}
      <h4>{props.title[props.titleNum] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}