비밀번호 눈 아이콘 클릭 시, 비밀번호 표시 및 표시(X) in 리액트(vite) + 수평선 그리는 법(html)

 

여기에서, 비밀번호의 input 태그 오른쪽에 있는 눈 모양의 아이콘을 클릭 시, 비밀번호가 보여지고 다시 누르게 되면 보여지지 않도록 기능을 구현하기 위해서는 type을 바꿔줘야 한다. 이때, 각 type에 따라 다르게 표시되는 것은 다음과 같다.

 

type={showPassword ? "text" : "password"}는 비밀번호 입력 필드에서 사용자가 입력한 내용을 텍스트로 표시할지 아니면 숨길지(비밀번호 형태) 결정하기 위해 추가한 것입니다.

---

왜 필요한가?

HTML input 태그에서 type 속성은 입력 필드의 유형을 정의합니다:

1. type="password":
   • 입력한 내용이 숨겨지고 점(•)이나 별(*)로 표시됩니다.
   • 보안이 필요한 비밀번호 입력 필드에 사용됩니다.
2. type="text":
   • 입력한 내용이 평문(plain text)으로 표시됩니다.
   • 숨김 없이 텍스트를 그대로 보여줍니다.

---

작동 방식

• 사용자가 비밀번호 보기 아이콘(FaEye)을 클릭하면 showPassword 상태가 true로 바뀌고, type="text"로 설정됩니다.
  • 이때 입력한 비밀번호가 평문으로 표시됩니다.
• 반대로 비밀번호 숨기기 아이콘(FaEyeSlash)을 클릭하면 showPassword 상태가 false로 바뀌고, type="password"로 다시 설정됩니다.
  • 이때 입력한 비밀번호가 숨겨집니다.

---

<hr> 태그는 HTML에서 수평선을 표시하는 태그입니다. "Horizontal Rule"의 약자로, 주로 내용을 구분하거나 섹션을 나눌 때 사용됩니다.