본문 바로가기
반응형

모달2

모달 대신 SweetAlert2 사용해보기 미리보기 사용이유react-modal 라이브러리를 사용해서 모달을 구현한다면 CSS와 컴포넌트도 구현해야 합니다.sweetaler2라이브러리를 사용하면 모달과 비슷한 효과를 내면서 간단하게 구현할수 있기때문에 사용했습니다.참고사이트sweetalert2 홈페이지 SweetAlert2SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxessweetalert2.github.io사용방법설치npm install sweetalert2importimport Swal from "sweetalert2";유효성 검사 함수 구현반환값으로 성공여부와 유효하지 않은 값을 입.. 2024. 7. 4.
리액트 모달 생성하기 미리보기모달(Modal)사용자 관심을 얻기 위해 사용하는 화면으로 다른 화면 위로 띄워 표현하는 화면이다.모달은 어디에 쓰여질까?모달은 사용자의 이목을 끌 수 있는 다양한 곳에서 사용이 가능하다.예를 들어 사용자가 어떤 동작을 실행 했을때 동작이 제대로 실행되었는지 알려주는 알림 형태,어떤 동작을 실행할 것인지 묻는 확인 형태, 사용자의 입력을 받도록 할 수 있게 하는 입력 형태로 사용이 가능하다.부트 스트랩 모달알림 형태확인 형태입력형태리액트에서 모달 사용하기react-modal 설치리액트에서 모달을 편하게 만들어주는 라이브러리인 react-modal을 설치한다.npm install react-modalindex.html 설정react-modal을 사용하기 위해 index.html에 부모 역할을 하는 .. 2024. 6. 26.
반응형