[TIL] React useState를 통해 로그인 정보 저장하기

문제

아이디에 값을 입력하고, 비밀번호에 값을 입력하고 [로그인] 버튼을 누르면 alert로 고객이 입력한 값을 알려준다.

EX) 고객님이 입력하신 아이디는 '입력 아이디'이며,
비밀번호는 '입력 비밀번호' 입니다.

다음 사항을 준수하며 만들어야 했다.
1) id 필드와 비밀번호는 필드의 값을 state로 관리하고, 변경이 일어날 때마다 setState를 해서 동기화를 시켜준다.
2) alert를 띄우고 나서는 아이디와 비밀번호 영역을 초기화 한다(빈 값)
3) 비밀번호는 보이면 안된다.

import { useState } from "react";

function App() {
  const [queryId, setQueryId] = useState("");
  const [queryPwd, setQueryPwd] = useState("");

  const loginCheck = function () {
    if (queryId.trim() === "") {
      alert("아이디를 입력해주세요!");
      return false;
    }

    if (queryPwd.trim() === "") {
      alert("비밀번호를 입력해주세요!");
      return false;
    }

    alert(
      `고객님이 입력하신 아이디는 ${queryId} 이며,
비밀번호는 ${Array(queryPwd.length).fill("*").join("")} 입니다.`
    );
    
    setQueryId("");
    setQueryPwd("");
  };

  const handleChangeId = function (event) {
    const inputId = event.target.value;
    setQueryId(inputId);
  };

  const handleChangePwd = function (event) {
    const inputPwd = event.target.value;

    setQueryPwd(inputPwd);
  };

  return (
    <div className="App">
      아이디: <input type="text" value={queryId} onChange={handleChangeId} />
      <br />
      비밀번호:
      <input type="password" value={queryPwd} onChange={handleChangePwd} />
      <br />
      <button onClick={loginCheck}>로그인</button>
    </div>
  );
}

export default App;

react는 기본적으로 useState를 통해 값을 관리하고 값을 바꾸고 싶다면 set을 통해 값이 바뀌었다는 걸 알려줘야 한다.
queryId나 queryPwd를 quertyId.value..등등 직접적으로 조작하면 ui까지 반영이 안되기 때문에 꼭 state를 통해 값을 관리해주어야 한다.

빈 문자열이 들어가면 리턴값이 false가 되어 밑에 코드까지 돌지 안게끔 처리해주었다. 이는 유효성 검사를 구현한 것이다.
유효성 검사나 if문을 통해 함수를 구현할때는 꼭 return 을 이용해 값을 반환해주어야 한다. 유효성검사는 조건에 맞지 않으면 다음 실행할 동작까지 가면 안되는데, 내가 의도한것과 다르게 반환값이 없어서 모두 실행되기 때문이다.

밑에는 비밀번호를 동그라미 기호로 가려주는 처리를 구현한 코드다.

// 처음에 구현한 비밀번호 숨김
const handleChangePwd = function (event) {
    const inputPwd = event.target.value;
	let securityPwd = "";

    for (let i = 0; i < inputPwd.length; i++) {
    securityPwd += inputPwd.replace(inputPwd, "●");
    }
    setQueryPwd(securityPwd);
  };

// 컴퓨터 입장에서는 메모리를 절약한다
const handleChangePwd = function (event) {
    const inputPwd = event.target.value;
	let securityPwd = "";

    for (let i = 0; i < inputPwd.length; i++) {
    securityPwd += inputPwd.replace(inputPwd, "●");
    }
    setQueryPwd(securityPwd);
  };

// 사용자의 입장에서는 좀 더 빠르게 동작한다
const handleChangePwd = function (event) {
    const inputPwd = event.target.value;
	let securityPwd = "";

    for (let i = 0; i < inputPwd.length; i++) {
    securityPwd += "●";
    }
    setQueryPwd(securityPwd);
  };

원래 비밀번호를 구현하는 코드는 위와 같이 구현했었다.
위 코드를 살펴보자면 replace 메서드를 통해 값을 치환해서 저장하게 되면 컴퓨터에 입장에서는 메모리에 변수가 저장된 주소가 값을 치환해서 똑같은 주소에 저장되기 때문에 메모리를 덜 쓰지만,
사용자의 입장에서는 replace 메서드도 어떻게 보면 반복문이기 때문에 값을 찾아서 바꾸는데 시간이 더 소요될 수 있다.
따라서 메모리를 하나 더 써서 바로 저장하게 되면 메모리는 하나 더 잡아먹더라도 반복문은 하나기 때문에 값에 좀 더 빠르게 접근이 가능하다.

alert(
      `고객님이 입력하신 아이디는 ${queryId} 이며,
비밀번호는 ${Array(queryPwd.length).fill("●").join("")} 입니다.`
    );

또한 튜터님께서 비밀번호를 값을 저장할 때부터 바꿔서 저장하게 되면 예를 들어 데이터베이스에도 값이 들어가게 되면 내가 치환한 동그라미값으로 뜨게 돼 관리자가 비밀번호를 알기 어려울 거라 하셨다.
그래서 값이 보여지는 쪽에서 조작할 수 있게,
나는 로그인 버튼을 누르면 alert창이 뜨는 함수를 구현했기 때문에 alert창에서 안 보여지게 구현하는 걸 도와주셨다.
일단 fill 메서드를 이용할거기 때문에 값을 Array 생성자를 통해 배열로 만들었다. 배열안의 값은 입력한 값의 크기만큼 ●기호로 채워줄거기 때문에 length값을 이용했다.
마지막으로 join을 통해 문자열로 이어주면 alert창에 내가 의도한 것처럼 비밀번호가 노출되지 않는다.

문제를 풀고 나서..

강의를 듣고 문제를 풀면서 직접 코드를 구현하면서 사용자 입장에서는 어떻게 하면 빠르게 접근하고 효율적인지를 고민하게 되면서 오히려 조금 부족한 코드를 통해 어떤 방향성으로 가야 좋을지 생각하게 돼서 많이 배우게 된 것 같다.