TIL 애플코딩 React 동적인 UI만드는 법(모달창 만들기)

리액트 환경에서 동적인 UI만드는 법(모달창 만들기)

import

function App(){
	let [   ,    ]=useState({"    ", "   ","    ""})
    let [modal,setModal] =useState(false)  <-(2) UI의 현재 상태를 state로 저장(글자,숫자 다 가능)
	
    return
      <div>
      	<div>
        </div>
        <div> <-(4)제목 클릭시 모달창을 띄우기-클릭시 state만 조절하면 됨.state변경함수(setModal)사용하기
        	<h4 onClick={()=>{setModal(true)}>{글제목[2]}></h4>  
        </div>
        {          
         modal==true ? <Modal/> : null
         }  <-(3)state에 따라 UI가 어떻게 보일지 작성, if절은 안됨.
      </div>

}

function Modal(){ <-여기다 모달창 함수 써줌. 위에 function아래다 새로 써줌. (1)html css로 미리 디자인 완성
 return(
 	<div className="modal">
     <h4>제목</h4>
     <p>날짜</p>
     
   

제목 클릭시 모달창 열리게 하려면

<h4 onClick={()=>{setModal(true)}>{글제목[2]}></h4>

제목 클릭시 열리고, 다시 클릭하면 닫히게 하려면

<h4 onClick={()=>{setModal(!modal)}>{글제목[2]}></h4>

map함수(유용)
모든 array 뒤에 붙일 수 있음.
[1,2,3].map(function(){

})
1. array 자료 갯수만큼 함수안의 코드 실행해줌
2. 함수의 파라미터는 array안에 있던 자료임
3. return에 뭐 적으면 array로 담아줌
4. 파라미터 두개 가능(i넣으면 0부터 하나씩 커짐)
같은 html반복생성하는 법
보통은 for문쓰면 됨.
중괄호 안에서는 for문 안됨.
map()으로 같은 html반복생성

글제목.map(function(a){
return(
	<div classNami="list">
     <h4>{ a }</h4>
     <p>
    <div>
    

글제목.map(function(a,i){
return(
	<div classNami="list">
     <h4>{ 글제목[i] }</h4>
     <p>
    <div>