일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- useState
- 자바스크립트
- react
- 코딩테스트 고득점 Kit
- Java
- 컴퓨터 네트워크
- design pattern
- JavaScript
- 프로그래머스 자바
- 백준
- 리액트 훅
- 프로그래밍 언어론
- 코딩테스트 고득점 Kit 완전탐색
- vanillaJS
- 디자인 패턴
- 코틀린
- websocket
- react firebase
- React JS
- NextJS
- 프로그래머스
- 데이터모델링과마이닝
- useEffect
- 자바 공부
- codesandbox
- 리액트
- 장고
- react hook
- 프로그래머스 완전탐색
- 자바
Archives
- Today
- Total
기록하는 개발자
[React] React hook useState를 사용해 modal창 만들기 본문
728x90
프로젝트를 하면서 modal창을 직접 만들어 쓰곤 했는데
기록한 적은 없었던 것 같아 글을 써본다.
React hooks usestate를 사용해 modal창을 만들었다.
클릭 전 화면
클릭 후 화면
폴더 구조
//App.js
import React, { useEffect } from "react";
import AppRouter from "./AppRouter";
function App() {
return <AppRouter />;
}
export default App;
//AppRouter.tsx
import React, { useState } from "react";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import Home from "./component/Home";
const AppRouter = () => {
const [isLoggedIn, setIsLoggedIn] = useState<Boolean>(false);
return (
<>
<BrowserRouter>
<Routes>
<Route path="/home/*" element={<Home />} />
<Route path="/*" element={<Navigate replace to="/home" />} />
</Routes>
</BrowserRouter>
</>
);
};
export default AppRouter;
Home.tsx
//Home.tsx
import "./home.scss";
import { useState } from "react";
import Modal from "./Modal";
const Home = () => {
const [modalState, setModalState] = useState<boolean>(false);
const onModalOpen = () => {
setModalState(!modalState);
};
return (
<div className="home-top-container">
<h1 className="home-header">Modal Practice</h1>
<span className="home-modal-open-Button" onClick={onModalOpen}>
modal 열기
</span>
{modalState && (
<Modal modalState={modalState} setModalState={setModalState} />
)}
</div>
);
};
export default Home;
// home.scss
.home-top-container {
padding: 40px;
.home-header {
margin-bottom: 40px;
}
.home-modal-open-Button {
border: 1px solid rgb(208, 208, 208);
border-radius: 7px;
padding: 8px;
}
}
Modal.tsx
//Modal.tsx
import "./modal.scss";
interface ModalProps {
modalState: boolean;
setModalState: React.Dispatch<React.SetStateAction<boolean>>;
}
const Modal = ({ modalState, setModalState }: ModalProps) => {
const onClickCloseButton = () => {
setModalState(!modalState);
};
return (
<div className="modal-top-container">
<div className="modal-container">
<div className="modal-header">
modal header
<span className="modal-close-button" onClick={onClickCloseButton}>
✖
</span>
</div>
<div className="modal-content">
<p>React에서 react hook useState를 사용해</p>
<p>modal창 만들어 보세요!</p>
</div>
<footer>modal footer</footer>
</div>
</div>
);
};
export default Modal;
// modal.scss
$custum-color: #000000;
$custum-opacity: 0.5;
.modal-top-container {
background-color: rgba($custum-color, $custum-opacity);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.modal-container {
position: relative;
border-radius: 10px;
background-color: rgb(235, 235, 235);
margin: 0 auto;
width: 400px;
height: 250px;
.modal-header {
position: relative;
background-color: #dadada;
border-radius: 5px;
text-align: left;
padding: 15px;
.modal-close-button {
position: absolute;
border: none;
top: 15px;
right: 15px;
width: 30px;
text-align: center;
}
}
.modal-content {
padding: 30px;
border-bottom: 1px solid #c2c2c2;
p {
line-height: 20px;
}
}
footer {
position: absolute;
bottom: 15px;
right: 15px;
}
}
728x90
'Web > React' 카테고리의 다른 글
[React] 그래서 Next.js를 왜 써야하는데? (0) | 2022.12.19 |
---|---|
[React] Babel과 Webpack (0) | 2022.12.08 |
[React] 상위 컴포넌트에서 하위 컴포넌트의 함수 호출하기 (0) | 2022.01.09 |
[React] React에 naver-map api 적용 도전기 (0) | 2022.01.07 |
<React 파헤치기-15> 컴포넌트 - 7. 컴포넌트에서의 콜백 함수 (0) | 2021.12.27 |