[React] Component로 스위치 만들기

 

 

html태그를 덩어리로 묶은 함수를

component라고 하는데

이 component를 조작해

토글버튼으로 켰다 껐다 해보자

 

 

let Modal = () => {
  return(
<div className="modal">
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)}

 

이렇게 생긴

component를 생성했다.

 

 

 

 

function App() {
  let [modal, setmodal] = useState('닫힘');
return (

 <button onClick={() => {
       setmodal(modal == '닫힘' ? modal = '열림' : modal = '닫힘')
        }}>모달 스위치</button>
        {
          modal == '닫힘' ?  null : <Modal/>
        }

)}

 

 

State로 modal을 생성하고 '닫힘' 문자를 저장한다

 

버튼을 생성 후 setmodal함수로 modal이 '닫힘' 일때는

버튼 클릭시 '열림'문자로 바꿔주고

'닫힘'이 아닐때는 '닫힘'으로 바꿔준다

 

그 밑에

중괄호를 열어 (여기서는 if문 사용을 할 수 없다)

modal == '닫힘'일 때는

아무일도 일어나지않게 하고

modal이 '닫힘'이 아닐때는 ('열림'일때는)

component를 띄우는

<Modal/>태그를 이용해서 띄워준다.

 

 

이렇게 스위치 완성!