React - Password Validation -리액트로 비밀번호 재입력 폼 만들기
May 27, 2019회원가입 시 필수적으로 넣는 기능인 비밀번호 재확인 기능을 리액트로 구현해보자.
기본적으로 위 화면 처럼 초기 비밀번호를 넣는 input field, 재확인 비밀번호를 넣는 input field, 그리고 비밀번호 일치/불일 치를 알려주는 문구를 넣을 공간이 필요할 것이다.
input 태그의 value 속성에 state로 업데이트되는 JSX를 추가한다. 각자 value 초깃값은 생성자 내부의 this.state에서 정의해주었다.
class PwVerify extends React.Component {
constructor() {
super();
this.state = {
password: '', // 첫번째 비밀번호
rePassword: '', // 두번째 비밀번호
pMessage:'' // 확인 메시지 (비밀번호 일치여부를 사용자에게 알려주는 메시지)
}; // 초기 state값을 셋팅해준다. 빈 스트링 값은 false를 뜻한다.
}
render() {
return (
<div>
<div className="wrapper">
<div className="boxposition">
<div className="inputboxes">
<input
className="idpw-input"
name="password"
type="password"
placeholder="비밀번호"
value={this.state.password}
onChange={this.handleConfirmPassword}
/>
<input
className="idpw-input"
name="rePassword"
type="password"
placeholder="비밀번호 재입력"
value={this.state.rePassword}
onChange={this.handleConfirmrePassword}
/>
</div>
<p className="maintext">{this.state.pMessage}</p>
</div>
</div>
</div>
)
}
export default PwVerify;사용자가 값을 입력할 때마다 this.state값을 업데이트해주며 첫번째 비밀번호를 넣는 필드와 두번째 비밀번호를 넣는 필드를 비교해서, 값이 다른 경우 “비밀번호가 일치하지 않습니다.”, 값이 같은 경우 “비밀번호가 일치합니다.” 라는 메시지를 화면에 보 여주고 싶다.
target은 사용자가 넣은 인풋값을 받아들이는 역할을 한다. setState함수를 통해 사용자가 입력하는 값을 state로 관리해주자.
onChange이벤트를 통해 매번 변화가 발생할 때마다 (첫번째 비밀번호 필드에서) this.handleConfirmPassword 매서드 혹은 (두번 째 비밀번호 필드에서) this.handleConfirmrePassword를 호출한다. 첫번째 비밀번호 필드와 두번째 비밀번호 필드 모두가 변화를 감지할 수 있어야 하기 때문에 둘 중 한 필드에만 메서드를 걸어선 안된다.
class PwVerify extends React.Component {
constructor() {
super();
this.state = {
password: '',
rePassword: '',
pMessage:''
}; // 초기 state값을 셋팅해준다. 빈 스트링 값은 false를 뜻한다.
}
handleConfirmPassword = (e) => {
this.setState({
[e.target.name]: e.target.value
}) //사용자가 입력한 값을 setState함수를 통해 업데이트
if (e.target.value !== this.state.rePassword) {
this.setState({
pMessage: "비밀번호가 일치하지 않습니다."
}) //사용자가 입력한 값이 재확인 비번과 일치하지 않을 경우
}
else if (e.target.value === '') {
this.setState({
pMessage: ''
}) // 아직 아무것도 입력하지 않았다면 당연히 메시지 띄워주면 안된다.
}
else if (e.target.value === this.state.rePassword) {
this.setState({
pMessage: "비밀번호가 일치합니다."
}) // 사용자가 입력한 비밀번호가 두개 다 일치하면 보여주는 메시지.
}
}
handleConfirmrePassword = (e) => {
this.setState({
[e.target.name]: e.target.value
})
if (e.target.value !== this.state.password) {
this.setState({
pMessage: "비밀번호가 일치하지 않습니다."
})
}
else if (e.target.value === '') {
this.setState({
pMessage: ''
})
}
else if (e.target.value === this.state.password) {
this.setState({
pMessage: "비밀번호가 일치합니다."
})
}
}
render() {
return (
<div>
<div className="wrapper">
<div className="boxposition">
<div className="inputboxes">
<input
className="idpw-input"
name="password"
type="password"
placeholder="비밀번호"
value={this.state.password}
onChange={this.handleConfirmPassword}
/>
<input
className="idpw-input"
name="rePassword"
type="password"
placeholder="비밀번호 재입력"
value={this.state.rePassword}
onChange={this.handleConfirmrePassword}
/>
</div>
<p className="maintext">{this.state.pMessage}</p>
</div>
</div>
</div>
)
}
export default PwVerify;ES6문법을 활용하여 아래처럼 훨씬 간결하게 나타낼 수도 있다!
handleConfirmPassword = (e) => {
this.setState({
[e.target.name]: e.target.value
}, () => {
const { password, rePassword } = this.state;
// const password = this.state.password; const rePassword = this.state.rePassword; 와 같은 뜻이다.
let pMessage = '';
if (e.target.value) {
pMessage = password === rePassword ?
"비밀번호가 일치합니다." : "비밀번호가 일치하지 않습니다.";
//password 와 rePassword가 일치하면 true 이므로 첫번째 값을, false이면(일치하지 않으면) 두번째 값을 리턴한다.
}
this.setState({ pMessage });
})
}정리하자면, 해당 태그의 onChange 이벤트를 통해 사용자가 입력하는 값을 state로 업데이트 해주고, 같은 메서드(사용자가 정의한) 안에서 다른 비밀번호 필드의 value와 현재 필드의 value가 일치하는지 여부를 확인한 뒤 일치/불일치 결과를 사용자에게 출력해서 보여준다.