프론트엔드/React

[React] 로그인 검증

순코딩 2023. 8. 2. 12:22
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;