[react] 리액트 tailwind 다이얼로그(모달, 팝업) 구현 style 라이브러리, tailwind를 적용하여 모달창 띄우기를 구현합니다. 구현 화면 구현 내용 react, hooks 방식 스타일 라이브러리, tailwind로 스타일 적용 확인 클릭시 다이얼로그 출현 X 버튼, 확인 버튼 클릭시 다이얼로그 화면 사라짐 tailwind로 다이얼로그 구현 부모 컴포넌트 import React, { useState, useContext } from "react"; import ModalAlert from "./ModalAlert"; const Parent = () => { const [openAlert, setOpenAlert] = useState(false); const onModalAlert = () => { setOpenAlert(!openAlert); } ret.. [react] react 모달창(팝업창) 구현 리액트 hooks로 간단한 모달창을 구현합니다. 구현내용 cdn 설치, 스타일은 기본만 사용 리액트 hooks 방식 버튼 클릭 후, 모달창 팝업 기능 구현 화면 리액트, 바벨 cdn 설치 간단한 예제는 cdn을 이용하여, react와 babel을 설치합니다. 구글에서 react cdn, bable cdn을 검색하여 페이지에서 cdn 코드 복사후, 태그 사이에 삽입합니다. 리액트 hooks 모달창, 팝업창 띄우기 html css body { padding: 50px; } .openBtn { background-color: #F9B514; padding: 5px 10px; border-radius: 4px; cursor: pointer; } .modal { position: fixed; top: 0; lef.. 이전 1 다음 반응형
