회원가입(SignUp) 페이지 비밀번호 내용 보이기

input태그의 type을 password로 주면 입력한 내용이 *** 처럼 보이지 않는다.

 

요즘 대부분의 서비스를 보면 비밀번호 오른쪽에 이모티콘을 클릭 시, 입력한 내용을 확인하고 다시 숨길 수 있는 기능이 있다.

이 기능은 이모티콘을 클릭하면 type을 text로 바꾸고 다시 클릭하면 password로 바꿔주는 간단한 기능이다.

boolean state를 활용하여 아래와 같이 input의 type을 동적으로 넣어준다.

...

const [hidePassword, setHidePassword] = useState(true);

const toggleHidePassword =()=>{
	setHidePassword(!hidePassword);
}

...

<input type={hidePassword ? "password":"text"}>