[React] 클릭시 등장하는 UI 만들기 - component

1. 먼저 state를 사용하기 위해 제일 상단에 {useState} 있나 확인

import React, **{ useState }** from 'react';

2. UI가 보임/안보임 정보를 useState로 저장

let [modal, setModal] = useState(false);

3. 삼항연산자 if문을 이용해 state가 true 일때 UI를 보여줌

{
    modal === true
    ? <Modal/>
    : null
  }

4. function App 아래에 component를 만들어준다.

function Modal(){
  return(
    <div className='modal'>
      <div>글제목</div>
      <p>발행일자</p>
      <div>상세내용</div>
    </div>
  )
}

5. 버튼을 만들고 onClick를 만들어서 ()⇒{setModal(true)}로 해주면 클릭시에 UI가 나타남

• 여기서 true 가 아니고 !modal로 하면 현재의 modal 상태의 반대가 되기때문에

열렸다 닫혔다 가능

<button onClick={()=>{setModal(!modal)}}>상세페이지</button>

6. 결과

import logo from './logo.svg';
import React, { useState } from 'react';
import './App.css';

function App() {
let [글제목, 글제목변경] = useState(['떡볶이맛집','짜장면맛집','케이크맛집']);
let [좋아요, 좋아요변경] = useState([0,0,0]);
**let [modal, setModal] = useState(false);** 

 return(
   <div>

   {글제목.map((a,i)=>{return(
     <div className='list'>
       <div>{글제목[i]}<span onClick={()=>{let copy = [...좋아요];
				copy[i]+=1;
				좋아요변경(copy);	
				}}>👍</span> {좋아요[i]}
        </div>
       <p>3월 28일</p> 
      </div>
    )})}

  **<button onClick={()=>{setModal(!modal)}}>상세페이지</button>

  {
    modal === true
    ? <Modal/>
    : null
  }**

    </div>  
 )  
}

//자식컴포넌스
**function Modal(){
  return(
    <div className='modal'>
      <div>글제목</div>
      <p>발행일자</p>
      <div>상세내용</div>
    </div>
  )
}**

export default App;