import React, { useState } from 'react';
const EventPractice = () => {
const [form, setForm] = useState({
id:'',
pw:'',
verification: false,
});
const {id, pw, verification} = form; // 비구조화 할당
const onChange = (e) => {
const nextForm = {
...form,
[e.target.name] : e.target.value // name
};
setForm(nextForm);
console.log(nextForm);
}
// 검증 함수
const verify = () => {
if(pw==='1234') // 비밀번호가 1234라면
{
const nextForm = {
...form, // 이전 폼 복사하여
verification : true // verification 값을 true로 변경
};
setForm(nextForm); // 변경된 form객체 반영
}
};
return (
<div>
<input
type='text'
name='id'
placeholder='사용자명'
value={id}
onChange={onChange}
></input>
<input
type='text'
name='pw'
placeholder='메세지'
value={pw}
onChange={onChange}
></input>
// 버튼 누르면 검증 함수 호출
<button onClick={verify}>검증하기</button>
// 검증 되었다면 텍스트 보여주기
{verification ? <div>검증되었습니다.</div> : null}
</div>
);
};
export default EventPractice;