모달

목표 위 사진에서 보이는 목록에서 제목을 클릭하면, 그와 관련된 정보를 띄우는 모달이 하단에 출력되도록 하겠다. 현재는 목록의 어떤 제목을 클릭해도 아래와 같이 첫번째 제목인 '나_Hi'만 출력되는상태이다. 코드 작성 순서 1. state 생성 let [indexNum,setIndexNum] =useState(0); 동적 UI 변동을 줘야하므로 state를 사용한다. 2. state 상태 함수를 이용하여 indexNum state 값 변경 { //a는 하나씩, i는 0부터 반복될때마다 1씩 증가하는 수 글제목.map(function(a,i){ return( {setModal(!modal); setIndexNum(i)}}>{a} { let copy=[...따봉] copy[i]=따봉[i]+1 따봉변경(cop..

기존 자바스크립트 방식과 달리 리액트에서는 데이터의 변동이 프론트 단에서 서버와의 통신 없이도 즉각적인 리빌딩 가능하다. 리액트에서 UI 만드는 단계 1. html css로 미리 디자인 완성 1) html function Modal(){ return ( 제목 날짜 상세내용 ) } 2) css .modal{ margin-top:20px; padding:20px; background:#eee; text-align:left; } 2. UI의 현재 상태를 state로 저장 let [modal,setModal] =useState(false); 3. state에 따라 UI 조작 {setModal(!modal)}}>{글제목[2]} 2월 17일 발행 { modal==true?:null } onClick 속성이 작성된 ..