⭐ useState 사용
Modal open 버튼 클릭시 모달창이 열리고, Close버튼과 외부에 있는 검정배경 클릭 시 모달창이 사라지는 기능
⭐ 전체코드
import styled from "styled-components";
import "./App.css";
import { useState } from "react";
function App() {
const [modalOpen, setModalOpen] = useState(false);
return (
<Container>
<ShowBtn onClick={() => setModalOpen(true)}>Modal open</ShowBtn>
{modalOpen && (
<BlackBg onClick={() => setModalOpen(false)}>
<ModalBox>
<Modal>
<h1>Modal</h1>
<button onClick={() => setModalOpen(false)}>Close</button>
</Modal>
</ModalBox>
</BlackBg>
)}
</Container>
);
}useState의 초기값을 false로 주었다. onClick을 이용해서 클릭할 때 true로 변하게 되면 모달창이 열리는 방법으로 기능을 구현 해봤다. 만들면서 true/false 기능보다 html 구조를 어떻게 짜야 할 지 조금 막막했는데 만들면서 조금은 알게 된 것 같다. 처음에는 모달창 위치를 flex로 줬는데 위치가 고정되지 않아서 position의 relative와 absolute를 사용해서 위치를 고정 시켜줬다.
⭐ dialog 태그 사용
HTML5에서 도입된 태그이고,
<dialog>를 사용하면 브라우저 내장 기능으로 모달창 기능구현이 가능하다. 태그를 선언하면 화면에 나타나지 않는 점 참고 !
- 열기 : showModal()
- 닫기 : close()
- 외부에 검정배경 style을 바꾸고 싶으면 backdrop 선택자를 사용하면 된다.
⭐ 전체코드
import styled from "styled-components";
import "./App.css";
import { useRef } from "react";
function App() {
const modalRef = useRef();
return (
<Container>
<ShowBtn onClick={() => modalRef.current.showModal()}>Modal open</ShowBtn>
<dialog ref={modalRef}>
<h1>Modal</h1>
<HideBtn onClick={() => modalRef.current.close()}>Close</HideBtn>
</dialog>
</Container>
);
}만들어보면서 확실히 코드가 짧아지고 사용하기가 편리했다. 내가 따로 state를 만들어서 true/false를 각각 onClick속성에 주지 않아도 되고, 내장 함수로 열기/닫기 기능이 있어서 onClick에 적어주기만 하면 기능구현이 가능했다. 그리고 Esc키, Enter키를 눌렀을 때 모달창이 닫히는 기능이나 내가 위치를 지정해주지 않아도 알아서 가운데 정렬이 된 점이 신기했다. 앞으로 모달창을 만들 때 간단해서 많이 사용할 것 같다.
