문제 상황

많은 사이트에서 비밀번호 입력창에 버튼을 달아놓고, 이를 클릭하면 ...으로 보이던 비밀번호가 텍스트로 전부 보이게 되는 기능을 구현해놓는다.
어떻게 이 기능을 구현할 수 있을지 알아보자!

원리

정말 간단하다.
input 태그의 type을 변경할 뿐이다.
비밀번호를 입력할 때 ...으로 표시되는 것은 input의 타입을 password로 지정해놓았기 때문인데, 이를 text로 변경하면 비밀번호가 보이게 되는 것이다!

필요한 것

1. type 변경 여부를 알리는 state 생성
2. 클릭 시 type 변경 함수를 실행하는 버튼 생성(보이기/숨기기는 서로 다른 아이콘 사용)
3. state 변경에 따라 type이 변경되도록 설정

적용

// type 변경 여부를 알리는 state
const [showPswd, setShowPswd] = useState<boolean>(false);

<div className="relative">
  <input
	// toggle 여부를 알리는 state에 따라 type을 변경한다.
	type={showPswd ? "text" : "password"}
	className="border-2 border-black mb-2 h-12 pl-2 w-[300px] md:w-[500px] md:text-xl focus:outline-none"
	placeholder="비밀번호를 입력해주세요(8 - 12자리)"
	onChange={onChangePswd}
	value={pswd}
	required
	minLength={8}
	maxLength={12}
  />

  // 클릭하면 input의 type을 toggle하기 위한 state가 변경된다.
  <div className="absolute top-[16px] right-[20px] sm:right-[30px]">
    {showPswd ? (
	  <BiShow onClick={toggleShowPswd} />
    ) : (
	  <BiHide onClick={toggleShowPswd} />
    )}
  </div>
</div>

참고 자료

참고 자료