React 페이지 팝업 | Pop-up Window in React | react-modal [23]

#React | #Modal | #Page Pop-up

Web엡에 무조건 하나쯤 필요한 Form만들기 Modal설명 | 유튜버-코딩 메모왕
/ 이제는 구독 하셔도 됩니다. /
코드에 괄호란 글자는 화살표 괄호로 바꿔주세요.
* 고객 요청, 문의, 또는 게시판이나 로그인 화면으로 활용 가능함.

[React 23편] Form만들기 Modal설명

9. 앱구조
App.jsx : 전체 앱
DecoModal 콤포넌트, 요건 각자 알아서 꾸며주자.
//CSS는 별도로 각자 공부를 해서, 예쁘게 꾸며보자.
Modal : 실제 모달이나, 모듈로 설치해서 편하게 사용하자.

10. 모듈 설치
npm install react-modal
인포트 해서 사용 가능하게 됩니다.
import Modal from 'react-modal'
Modal.setAppElement("#root");
불러오기가 가능해집니다.

11. App콤포넌트
isOpen 상태
const hModalOpen=() //모달 여는 함수, isOpen true
const hCloseModal=() //모달 닫는 함수, isOpen false

return에는
button onClick={hModalOpen}
콤포넌트 DecoModal isOpen={isOpen} onClose={hCloseModal}

12. function DecoModal({isOpen, onClose}) 컴포넌트
const [issue, setIssue] = useState(
{
name: '',
email: '',
message: ''
}
)

const hSubmit=(e)={
e.preventDefault();
onClose()
}

13. return에 이제, 모달 잘 불러오고, 모양 잘 만들면 끝.
프롭스로, 함수와 상태변수를 전달해보자.
Modal에 달아줄 것
isOpen, onRequestClose, shouldCloseOnOverlayClick, style
Form에 달아줄 것
onSubmit
input에 달아줄 것
type
value
onChange={(e)=setIssue(prev = ({...prev, email: e.target.value}))}
testarea에 달아줄 것
value={issue.contents}
rows="12"
onChange={(e)=setIssue(prev = ({...prev, contents: e.target.value}))}
style={{ width: '95%', padding: '8px' }}
button에 달아줄 것
onClick={onClose}
button type='submit'

모달의 스타을은 여러분이 예쁘게 해보세요.
저는 그냥 요렇게
const customModalStyles = {
content: {
backgroundColor: '#646cffaa', // Dark background color
color: '#fff', // Light text color
border: 'none',
borderRadius: '8px',
maxWidth: '400px',
maxHeight: '350px',
margin: 'auto',
padding: '20px',


},
overlay: {
backgroundColor: 'rgba(0, 0, 0, 0.5)', // Dark overlay
},
};

13. 대략 이러한데, 복잡하지만, 이해하면 무지 쉬움.
그리고, 서버에 저장한 완료를 유저에게 보여주기 위해,
(실제 서버 저장은 다음 시간에 해보아요.)
// 여기에 서버 통신 함수를 적으면 됩니다.
setTimeout(() =괄호 {
window.alert('Successfully submitted!');
}, 700);

14. 이제는 구독하셔도 됩니다.
좋아요.

---- 기본 세팅
1. command창을 열기
2. 폴더하나 만들고 mkdir
"우리는 이제 Vite로"
3. npm create vite@latest
(예전에 우리는 npx create-react-app appname)
4. cd appname
5. code .
6. new Terminal
7. npm install (귀찮으면그냥 i만 해도됨) 필요 패키지 설치
package.json에 의해 필수 모듈만 재빠르게 설치가 진행된다.
8. npm run dev하면 앱이 실행됩니다.
(예전에 우리는 npm start) 예전보다, 훨씬
빨라지는 것이 느껴지실 것입니다.
---- 여기까지 기본 세팅