React useState Hook 이해하기

입력 필드 내에서 암호 문자열을 표시하고 숨기는 해결 방법을 이해하려면 먼저 useState 후크를 이해해야 합니다.

기본 React 앱 내부의 요소 상태는 useState 후크라는 것으로 관리됩니다. javascript 객체, 배열, 문자열, 부울 등과 같은 데이터 본문은 useState 변수 내부에 저장할 수 있습니다.

예를 들어:

const [showPassword, setShowPassword] = useState(false)

위의 예에서는 기본적으로 showPassword를 false에 할당합니다. 그 다음에 setter 변수가 옵니다. 누군가가 버튼/아이콘을 클릭하여 비밀번호를 표시할 때마다 이를 사용할 수 있습니다.

예를 들어

const [showPassword, setShowPassword] = useState(false)

const togglePass = (e) => {
  e.preventDefault() // Important! If you don't include this your page will refresh

  setShowPassword(!showPassword)
}

return (
<>
  <form>
    <input type='password' />
    <button onClick={togglePass}>Toggle Password</button>
  </form>
</>
)

위의 예에서 볼 수 있듯이 showPassword를 현재와 반대로 설정하는 함수가 있습니다. true이면 false로 설정되고 false이면 true로 설정됩니다.

그 후에 하나의 입력과 버튼이 있는 간단한 양식 필드가 있습니다. 버튼의 onClick은 togglePass 기능을 설정합니다. 따라서 버튼을 클릭할 때마다 true에서 false로 또는 그 반대로 전환하는 간단한 작업을 수행합니다.

마법이 일어나는 곳입니다. 아마 눈치채셨겠지만 위의 코드에서 입력 시 유형을 하드 코딩했습니다. 그것을 고칠 수 있습니다.

const [showPassword, setShowPassword] = useState(false)

const togglePass = (e) => {
  e.preventDefault() // Important! If you don't include this your page will refresh

  setShowPassword(!showPassword)
}

return (
<>
  <form>
    <input type={showPassword ? 'password' : 'text'} />
    <button onClick={togglePass}>Toggle Password</button>
  </form>
</>
)

삼항 연산을 사용하여 조건문을 설정할 수 있습니다. 일반 영어로 다음과 같이 읽습니다.
If showPassword is true, then set the input type to password. If it is not true (false), then set the input type to text.
이 몇 줄의 코드를 사용하여 React의 비밀번호 양식 필드에 대한 표시 및 숨김을 쉽게 만들 수 있습니다!