[리액트] 리액트로 간단한 로그인 기능 구현하기

 

방법 1) onChange 사용

import React, { useState, useEffect } from 'react'

const Login = () => {
  const user1 = {
    id: 'monalisa',
    pwd: '1234',
  }

  const [UserInfo, setUserInfo] = useState({
    id: '',
    pwd: '',
  })

  const validateUserInfo = e => {
    const { name, value } = e.target
    setUserInfo({ ...UserInfo, [name]: value })
  }

  const isUser1Equal = e => {
    if (e.key === 'Enter') {
      user1['id'] === UserInfo['id'] && user1['pwd'] === UserInfo['pwd']
        ? alert('로그인 성공')
        : alert('로그인 실패')

      setUserInfo({
        id: '',
        pwd: '',
      })
    }
  }

  return (
    <>
      <input
        type='text'
        placeholder='아이디를 입력하세요'
        name='id'
        onChange={validateUserInfo}
      />
      <input
        type='password'
        placeholder='비밀번호를 입력하세요'
        name='pwd'
        onChange={validateUserInfo}
        onKeyDown={isUser1Equal}
      />
      <button onClick={isUser1Equal}>로그인</button>
    </>
  )
}

export default Login

 

방법 2) useRef 사용

import React, { useRef } from 'react'

const Login = () => {
  const user1 = {
    id: 'monalisa',
    pwd: '1234',
  }

  const idEl = useRef()
  const pwdEl = useRef()

  const isUser1Equal = e => {
    if (e.key === 'Enter') {
      user1['id'] === idEl.current.value && user1['pwd'] === pwdEl.current.value
        ? alert('로그인 성공')
        : alert('로그인 실패')

      idEl.current.value = ''
      pwdEl.current.value = ''
    }
  }

  return (
    <>
      <input
        type='text'
        placeholder='아이디를 입력하세요'
        name='id'
        ref={idEl}
      />
      <input
        type='password'
        placeholder='비밀번호를 입력하세요'
        name='pwd'
        ref={pwdEl}
        onKeyDown={isUser1Equal}
      />
      <button onClick={isUser1Equal}>로그인</button>
    </>
  )
}

export default Login