[React] 비밀번호 보임/숨김 기능 (useState)

비밀번호 보임/숨김 기능

로그인 할 때 비밀번호는 숨김으로 지정하는 것이 보안상에는 좋지만
실제로 사용자가 입력할 땐 보이는 것이 편리하다.

입력하기엔 좋음

보안이 좋음

눈모양 이모티콘을 클릭하여 보임/숨김 기능을 구현하였다.

이 코드는 react-native 의 TextInput 태그를 사용할 때!

//react native 기준!

import { useState } from "react";


const Login = () => {
	const [seePassword, setSeePassword] = useState(true);
  
	const seePasswordHandler = () => {
    setSeePassword(!seePassword);
  };
  
  return (
    
    //TextInput
    
    <TextInput
    	placeholder="Password를 입력해주세요"
    	value={userPassword}
		secureTextEntry={seePassword}
		onChangeText={(text) => setUserPassword(text)}
	/>

	// 눈모양 아이콘 위치
     {seePassword ? (
              <TouchableOpacity onPress={seePasswordHandler}>
                "눈모양 아이콘"
              </TouchableOpacity>
            ) : (
              <TouchableOpacity onPress={seePasswordHandler}>
                "눈모양 아이콘"
              </TouchableOpacity>
            )}
            )

seePassword 가 true 일때

TextInput 의 secureTextEntry 에 의하여 비밀번호가 숨겨지고,

false 일 때 보인다.

그에 따라 눈모양아이콘도
position:absolute; 로 위치를 고정 시켜서

기능에 맞는 이모티콘을 보여지게 하면 된다.