React_REDUX-로그인페이지(useState)

1. useState/dispatch 불러오기

import React, { useState } from 'react'

import React, { useDispatch } from 'react-redux'

 

2. state 선언하기

const [ state, setstate ] = useState (initialState)

-state : state 명 입력   ( emial, password 등 상태가 변경되는 것들 / ex) input의 value값 )

-initialState : 해당 state의 처음 상태. ( "" 라고 하면 => 첫 화면에 email 란 = 공란 )

 

***state명이 요소의 value에(ex. <input value="state"/>) 입력되지 않아도 상관없다.

그저 onChange(submit 등) 함수와 연결되면 된다. (ex. onChangeHandler=(e)=>{setState(e.curT.v)}

 

3. 요소에 <함수 실행 속성값> 입력하기

<form onSubmit = { 함수명 (ex. onSubmitHandler ) } ></form>

<input onChange = { 함수명 (ex. onEmailHandler } />

 

4. 실행시킬 <함수> 선언하기

  4-1. email, password 란 ( state가 change되도록 함 )

const onEmailHandler = ( event )=>{

        setEmail ( event . currentTarget . value ) 

    }

 

: change가 감지되면 => 현재 target의 값을 반영함

: setState  : state을 바꿔주고 싶을 때 사용함

 

 

  4-2. submit 버튼  (click했을 때 )

const onSubmitHandler = ( event )=>{

        event . preventDefault();  // 버튼을 눌렀을 때 refresh되는 것을 방지한다.

 

        let body={

            email : Email,

            password : Password

        }

 

        dispatch.(loginUser (body) )           //body 인자로 loginUser(action, function)라는 action을 취한다.

        .then(reponse =>{

                 if(reponse.payload.loginSuccess){     //payload - loginSuccess 전송 (server-loginSuccess와 관련)

                        props.history.push('/')            //LandingPage로 이동

                  }else{

                        alert( 'Error' )

                  }

        })

    }