3. Getting Username

<추가 사항>

※username 값을 받아 브라우저에 표시

  -로그인 상태 여부 확인

  -로그아웃 버튼 추가

  -삼항 연산자를 이용해서 true(로그인) false(로그아웃)마다 브라우저에 표시되는 div 분리

 

componenet

  -Input.JSX

  -Button.JSX

module

  -Login.JSX

css

  -List.css

 

module - Login.JSX

import React, {useState} from 'react'
import '../css/List.css'
import Input from '../component/Input'
import Button from '../component/Button'

function Login() {
  const [loginValue, setLoginValue] = useState('')
  const [loginBool, setLoginBool] = useState(true) //true, false로 로그인 상태 여부 확인

  const onChangeLogin = event => {
    setLoginValue(event.target.value)
  }

  const handleLogin = event => {
    event.preventDefault()
    setLoginBool(false) 
  }

  const handleLogout = () => { //로그아웃 기능
    setLoginBool(true)
    setLoginValue('')
  }

  return (
    <div>
      {loginBool ? ( //삼항 연산자를 이용
        <div> //로그아웃 상태 (true)
          <form className="loginDiv" onSubmit={handleLogin}>
            <Input
              type={'text'}
              value={loginValue}
              onChange={onChangeLogin}
              maxLength={15}
            />
            <Button className={'loginButton'} name={'Login'} />
          </form>
        </div>
      ) : (
        <div className="loginDiv"> //로그인 상태(false)
          <h1>Hello {loginValue}</h1>
          <Button className={'loginButton'} name={'Logout'} onClick={handleLogout} />
        </div>
      )}
    </div>
  )
}

export default Login