UI 만드는 법:

1. UI와 관련된 중요 정보들을 state로 저장해놓고
2. state에 따라서 UI가 수정되게 만들면 됨.
   (UI 제작 패턴은 다 비슷하다)

ex)
1. 0,1,2번째 중 몇번째 제목을 눌렀는지 상태정보를 state에 저장
2. state가 0일때는 0번째 제목을 출력해달라
3. state가 1일때는 1번째 제목을 출력해달라

function App (){
  let [글제목, 글제목변경] = useState(['aaa', 'bbbbb', 'ccccccc']);
  let [누른제목, 누른제목변경] = useState(0);
  
  return (
    <div>
      ...
      { 
       글제목.map(function(a, i){
        return (
        	<div className="list">
          	 <h3 onClick={ ()=>{ 누른제목변경(i) } }> { a } </h3>
          	 <p>2월 18일 발행</p>
        	 <hr/>
        	</div>
    	}) 
	  }
    
     {
       <Modal 글제목={글제목} 누른제목={누른제목}></Modal>
     }
    </div>
  )
}
function Modal(props){
  return (
    <div className="modal">
      <h2> { props.글제목[props.누른제목] } </h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

정리

"state는 UI의 현재상태를 보관하는 저장소역할을 하는구나”만 기억