[React] Login 페이지 - password 보기 기능

React로 로그인 기능을 만들면서

패스워드를 입력하고 보여주길 원할 때

버튼을 누르면 패스워드가 보이고 다시 누르면 보이지 않게 하는 기능을 만들어보자

 

// useState로 type과 visible로 나눠 state를 관리해준다

const [pwType, setpwType] = useState({
    type: "password",
    visible: false,
  });

 

위에서 state에서 type은 password로 되어 있기 때문에 input에서의 값들은 보이지 않을 것이다.

// input 의 타입을 바꿔준다
<input type={pwType.type} />

// 이 태그를 클릭할 때 비밀번호가 보여지고 숨겨지는 기능이 실행된다.
<span onClick={handlePasswordType}>
  {pwType.visible ? "비밀번호 숨기기" : "비밀번호 보기"}
</span>

 

위의 span 태그를 클릭하면 아래의 이벤트가 실행되게 한다.

만약 pwType.visible 이 현재 false라면 type은 password 상태이고 비밀번호가 보이지 않는 상태이기 때문에

 

type을 text로 바꿔주면 password input은 보일 것이고

visible을 true로 바꿔주면서 span에서 출력 값을 바꿔주도록 한다.

const handlePasswordType = (e) => {
    setpwType(() => {
    // 만약 현재 pwType.visible이 false 라면
      if (!pwType.visible) {
        return { type: "text", visible: true };

	//현재 pwType.visible이 true 라면
      } else {
        return { type: "password", visible: false };
      }
    });
  };