회원가입 폼 만들기 : 실시간 비밀번호 확인하기 (with. 데이터 디스트럭쳐🔥링, 비동기)

 

 

 

마음에 들어요! 😄

 

 

 

비밀번호 일치하면: 일치해요 문구비밀번호 불일치하면: 일치하지않아요 문구비밀번호확인에 값을 입력하지 않으면: 아무것도 뜨지 않음 문구

---

 

 

실시간으로 비밀번호 일치하는지 여부를 묻기 위해 고군분투 했다!

이번에도 새롭게 알게 된 내용이 있어서 기록하려고 글을 작성한다.

끊임없이 새로운 걸 알게되는 코딩의 세계는 정보의 바다? 정보의 파도?!😄🌊

 

 

 

 

비밀번호 확인 이벤트는 onChange이벤트 안에서 직접 만든 함수에다 내가 적은 비번 값을 실시간으로 얻어내어

둘을 비교하고 상태를 저장하는 것이다.

 

 

 

 

1. 비번 상태와 비번을 compare할 상태를 만든다.

const [pwd1, setPwd1] = useState("");
const [pwd2, setPwd2] = useState("");
const [pwdCompare, setPwdCompare] = useState(false);
const [pwdCheckText, setPwdCheckText] = useState("");

 

pwd1과 2는 비번을 저장하는 상태이고, pwdCompare는 비번들끼리 비교 후 넣을 불리언 상태, compare값에 따라 text는 일치해요 불일치해요를 넣을 상태이다.

각 input마다 onChange이벤트 함수를 걸어서 formdata를 수집해도 pwd1과 pwd2 상태는 만드는 것을 추천한다.

onChange로 접수된 비번1 2값들은 리액트의 비동기 업데이트 때문에 같은 1111, 1111을 입력해도 한 박자 느리게 일치 여부를 판단한다.

 

 

2. 비밀번호와 비밀번호 확인 input에 onChange 이벤트를 걸어둔다. 함수 형태로

 

onChange 이벤트를 여러 개 작성할 땐, 익명함수를 이용하면 된다. ( ) => {}

onChange={(e)=>{
          onChangeForm(e);
          onChangePwd(e);
}}/>

 

내가 비번일치 이벤트로 사용할 함수명은 onChangePwd(e)다.

익명함수를 통해서 e값을 매개변수로 집어넣고, onChangePwd에도 e를 집어넣는다.

 

 

 

 

3. 함수에서 비밀번호 실시간 처리 코드를 작성한다.

function onChangePwd(e) {
    const { name, value } = e.target;
    
    if (name === "form_pwd1") setPwd1(value);
    else if (name === "form_pwd2") setPwd2(value);

    // 최신값을 즉시 반영(비동기로 인한 오류 처리)
    const temporSavedPwd1 = (name === "form_pwd1") ? value : pwd1;
    const temporSavedPwd2 = (name === "form_pwd2") ? value : pwd2;

     if(temporSavedPwd1 && temporSavedPwd2) {
      const isMatched = (temporSavedPwd1 === temporSavedPwd2); // 같으면 t, 다르면 f
      setPwdCompare(isMatched); // t
      setPwdCheckText(isMatched ? "일치해요😄" : "일치하지 않아요😔");
     } else {
      setPwdCompare(false);     // f
      setPwdCheckText("");
    }
  }

 

 

데이터 디스트럭쳐

받은 매개변수 e를 이용하여 e.target을 하면 내가 필요한 input의 key와 value에 접근할 수 있다.

e.target.name은 key의 값에, e.target.value는 key의 value의 값에 접근이 가능하다.

예를 들면

<input name="form_pwd1" value="1111"/> 이라면

e.target.name은 form_pwd1 라는 값을 가져오고, e.target.value는 1111에 값을 가져온다.

 

const { name, value } = e.target이라는 말은 데이터 디스트럭쳐링인데

내가 저장할 변수명이 e.target의 속성과 일치하다면 알아서 간편하게 매치해서 저장해주는 문법이다.

 

const { name, value } = e.target 과

const name = e.target.name;   const value = e.target.value;  는 같다.

 

원래라면 const name = e.target.name;   const value = e.target.value;  이렇게 적어도 되는데

어차피 이름이랑 꺼낼 이름이 가리키는 값이 동일하니까

 

1. { name, value } << 객체 안에서 얘네 둘만 꺼낼게
2. 자동으로 같은 이름의 변수 name, value 를 생성해줌 & 값도 넣어줌

 

얘가 정리를 잘해주네...

 

 

이것두

 

 

 

둘이 이해가 잘 되게 설명해줘서 가져왔다. 미래의 나를 위해서도..ㅠㅠ

이상 디스트럭쳐 이야기는 여기까지하기로 하고.

 

 

if문을 이용해서 디스트럭쳐한 name의 이름이 form_pwd1인지 2인지 확인해서 각각의 input value를 pwd1,2 상태에 저장한다.

큰 의미가 있지는 않지만 작은 의미는 있다. 상태로 실시간 매치를 하면 이것도 비동기적인 업데이트 때문에 한 박자 느리게 일치 여부를 판단해서 비교가 안 된다.

새 지역변수를 만들어 e.target.value를 직접 넣고 그들끼리 매치해야 한다.

pwd1,2의 상태값은 언제까지나 삼항연산자로 ? value : pwd1 << else면 그 상태값이라도 집어넣으라는 의미로 저장한다.

이 값으로 매치할 생각이 아니라 undefined의 값이 들어가지 않게 하기 위한 보조적인 작업인 셈이다.

 

나머지는 주석으로 정리한 이야기로도 충분할 것 같다. 내가 생각했지만 temporSavedPwd라는 말은 꽤 잘 지은 말인 것 같다 ㅎㅎ

길긴하지만, 임시 비밀번호 저장이라는 의미가 나한텐 잘 들어온다.  후후후

 

 

 

4. 비밀번호 일치 여부 문구를 보여준다.

<span style={{ "color": pwdCompare ? "blue" : "red" }}>{pwdCheckText}</span>

 

일치 여부 불리언에 따라 글씨 색상을 다르게 지정한다. 일치 여부를 직관적으로 알릴 수 있다.

 

 

 

---

 

그리고 비밀번호를 해시함수로 저장해서 비번을 암호화하는 저장 방법도 넣어보고 싶어서 그것도 한 번 시도해보려 한다!