import React, { useState, useEffect } from 'react' import { Alert, Col, Container, Form, Row, Button, Spinner } from "react-bootstrap" import axios from "axios" import catchErrors from '../utils/catchErrors' import { Redirect } from 'react-router-dom' import { handleLogin } from '../utils/auth' const INIT_USER = { email: '', password: '' } //초기 유저에 이메일 비밀번호 설정 function Login() { //const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>); const [user, setUser] = useState(INIT_USER) const [disabled, setDisabled] = useState(true) const [error, setError] = useState('') const [success, setSuccess] = useState(false) const [loading, setLoading] = useState(false) useEffect(() => { //참거짓 판단 값들의 원소들이 element로 들어간다 const isUser = Object.values(user).every(el => Boolean(el)) isUser ? setDisabled(false) : setDisabled(true) }, [user]) function handleChange(event) { const {name, value} = event.target //{}안에 값을 이벤트.타겟에 지정?한다 setUser({...user, [name]: value}) } async function handleSubmit(event) { event.preventDefault() //리셋을 막는다 try { setLoading(true) setError('') //값을 배열로 설정 const response = await axios.post('/api/auth/login', user) console.log(response.data) handleLogin(response.data.userId)//로그인했을때 userid data를 넣는다 setSuccess(true) } catch (error) { catchErrors(error, setError) } finally { setLoading(false) } } if (success) { alert("로그인되었습니다.") return //성공하면 홈화면으로 간다 } return (

로그인

{error && {error} }
이메일 비밀번호
) } export default Login