[react] 비밀번호 보기/숨기기 기능

안녕하세요. 리액트 공부에 한창인 좋아요요정입니다! 

비밀번호 보기/숨기기 기능 공유합니다

 

① state : type과 visible의 키를 가진 오브젝트를 생성

② 해당 아이콘 클릭 시, visible로 상태를 확인한 뒤 type과 visible 변경

 

 

 

기본 구조 

import React, { useState } from 'react';

const Input = ({}) => {
	//password type 변경용 state
    const [passwordType, setPasswordType] = useState({
        type: 'password',
        visible: false
    });
    
    //password type 변경하는 함수
    const handlePasswordType = e => {
        setPasswordType(() => {
            if (!passwordType.visible) {
                return { type: 'text', visible: true };
            }
            return { type: 'password', visible: false };
        })
    }
    return (
    	<div>
    	    <input type={passwordType.type} />
            <span onClick={handlePasswordType}>
            	{  passwordType.visible ? <span>숨기기</span> : <span>보이기</span>  }
            </span>
    	</div>
    )
}

export default Input;

리액트 훅을 이용했습니다 :) useState사용.

아이콘을 넣을 시 <> 한 부모로 묶어서 넣어주시면 됩니다! 

 

 

 

하나씩 기록을 남길 예정 😍