1. 모달창 구현
회원가입 버튼을 누를 때 이메일과 비밀번호를
작성하는 폼을 모달로 띄우고 싶다.
로그인 버튼을 누르면 구글로 로그인 또는 이메일로 로그인
버튼을 띄운 모달을 생성하자.
1.1 모달 라이브러리 설치
npm install react-modal 또는 yarn add react-modal
- 오버레이(overlay)의 투명도는 backgroundColor: rgba(255,255,255,0~1) 마지막 인자에서 0~1 사이의 숫자로 투명도를 조절할 수 있다.
| 이름 | 기능 |
|---|---|
| isOpen | 모달 창이 표시되어야 하는지 여부를 설명하는 boolean 값으로 true여야 모달 창이 열린다. |
| onRequestClose | 모달이 닫힐 때 실행될 함수를 의미한다.즉,사용자가 모달을 닫으려고 할 때 실행되는 함수이다. |
| style | 모달 창과 모달 창 바깥에 대한 style을 지정해준다. |
| ariaHideApp | appElement를 숨길지 여부를 나타내는 boolean 값으로 true이면 appElement가 숨겨준다. |
| contentLabel | 스크린리더 사용자에게 콘텐츠를 전달할 때 사용되는 방법을 나타내는 문자열 |
| shouldCloseOnOverlayClick | 팝업창이 아닌 바깥 부분에서 클릭하였을 때,닫히도록 할 것인지에 대한 처리로 기본값은 true이다. |
