React) 간단한 비밀번호 검증 예제 Password Validation

Password Validation 

---

• source code

/* validation.css */

.success{
    background-color: lightgreen;
}

.failure{
    background-color: lightcoral;
}

import React, { useState } from 'react';
import './validation.css';

const staticPassword = '0000';

const Validation = () => {
    const [password, setPassword] = useState('');
    const [clicked, setClicked] = useState(false);
    const [validated, setValidated] = useState(false);

    const handleChange = e => {
        setPassword(e.target.value);
    }

    const handleClick = () =>{
        setClicked(true);
        setValidated(password===staticPassword);
    }

    return(
        <div>
            <h1>Ref Practice</h1>
            <input 
                type='password'
                value={password}
                onChange={handleChange}
                className={clicked ? (validated ? 'success' : 'failure') :''}
            />
            <button onClick={handleClick}>Validate</button>
        </div>
    );
}

export default Validation;

• code explanation 

현실에서는 이렇게 static으로 비밀번호를 설정해 두는 경우는 없겠지만 간단한 예제이므로 이렇게 설정해두었습니다. 

input에서 onChange 이벤트가 발생하면 handleChange 함수를 호출하여 입력된 값을 password 로 set 해줍니다. 

그리고 button에서 onClick 이벤트가 발생하면 handleClick 함수를 호출하여 clicked 여부를 true로 바꾸고, 입력된 password가 staticPassword 즉, 0000 이라면 validated를 true로, 아니라면 false로 set 해줍니다. 

그리고 input의 className은 클릭되지 않은 상태라면 따로 설정하지 않고, 클릭되었다면 validate 여부에 따라 다른 className을 설정하도록 삼항 연산자를 사용합니다. 

클릭되었다면, 그리고 validated 값이 true가 되었다면 success로 설정하여 css의 .success 스타일이, false라면 .failure 스타일이 적용되게 됩니다. 

• view

기본적으로 브라우저에는 다음과 같은 화면이 보입니다.

static으로 설정해둔 비밀번호는 '0000'인데 그와 다른 '1234'를 입력하고 validate 버튼을 누른 경우 다음과 같이 input 백그라운드 색상이 붉은색으로 바뀝니다. 

'0000'으로 제대로 입력한 뒤 validate 버튼을 누른 경우에는 다음과 같이 초록색으로 바뀝니다. 

---

References

• 리액트를 다루는 기술 (김민준)