[React] 로그인 페이지 만들기

return (
	<div style={{
		display: 'flex', justifyContent: 'center', alignItems: 'center', 
		width: '100%', height: '100vh'
	}}>
		<form>
			<label>Email</label>
			<input type="email" value onChange />
			<label>Password</label>
			<input type="password" value onChange />
			<br />
			<button>
				Login
			</button>
		</form>
	</div>
	)

그럼 이렇게 뜬다

이러면 보기가 좀 불편하기에 

<form style={{
			display: 'flex', flexDirection:'column'
		}}
		>

form에 스타일 태그를 넣어주면

이렇게 가운데 정렬이 된다

하지만 이메일과 비밀번호에 onChange에 핸들러가 없기 때문에 입력이 안됨

그 전에 value 부분에 state를 넣어줘야 함

안에서 데이터를 바꾸려면 state를 바꿔서 변화를 시켜줘야 함

function LoginPage(props) {
	const dispatch = useDispatch();
	let navigate = useNavigate();

	const [Email, setEmail] = useState("") //서버에 보내고자하는 값들을 state에서 받음
	const [Password, setPassword] = useState("")
	}

const [Email, setEmail] = useState(initialState)​

initialState는 처음에 이메일이 어떻게 되는지에 관한 것 -> 처음에는 "" 빈스트링으로 설정

지금까지도 input칸에 타이핑은 안 됨

타이핑을 할 때 onChange라는 이벤트를 발생시켜 state을 변경 -> state를 변경하면 value가 바뀌는 것

그래서 이제 핸들러 추가

function LoginPage(props) {

	const onEmailHandler = (event) => {
		setEmail(event.currentTarget.value)
	}

	const onPasswordHandler = (event) => {
		setPassword(event.currentTarget.value)
	}
	}

이러면 잘 입력 됨!

근데 submit 핸들러가 없기에 제출되지 않음

function LoginPage(props) {

	const onSubmitHadler = (event) => {
		event.preventDefault(); //없으면 매번 페이지가 리프레쉬됨

		console.log('Email', Email)
		console.log('Password', Password)

		let body = {
			email: Email,
			password: Password
		}
		Axios.post('api/users/login', body)
        	.then(response => {
			})

	}

event.preventDefault()
리프레쉬가 되어버리면 원래 해야될 일들을 하지 못함 그래서 리프레쉬를 막음

이러면 Axios.post 안에 처리할 걸 써주면 됨
하지만 우리는 Redux를 사용하기로 했기에 아래의 코드 추가

import { useDispatch } from 'react-redux';

const dispatch = useDispatch();

dispatch(loginUser(body))
			.then(response => {
				if (response.payload.loginSuccess) {
					props.history.push('/') //페이지 이동
				} else {
					alert('Error')
				}
			})

디스패치를 이용해 액션을 취함

액션 다음 리듀서 -> 스토어 의 순서

loginUser가 액션 이름

 

필요한 나머지 코드들

// _reducers/index.js

import { combineReducers } from "redux"; //s
import user from './user_reducer';

const rootRedudcer = combineReducers({
	user
})

export default rootRedudcer;

// _reducers/user_reducer.js

import {
	LOGIN_USER, 
	REGISTER_USER
} from '../_actions/types';

export default function (state = {}, action) {
	switch (action.type) {
		case LOGIN_USER:
			return {...state, loginSuccess: action.payload }
		default:
			return state;
			
	}
}

// _actions/user_action.js

import axios from "axios";
import {
	LOGIN_USER, 
	REGISTER_USER
} from './types';

export function loginUser(dataTosubmit) {

	const request = axios.post('/api/user/login', dataTosubmit) //서버로 내용 보내기
	.then(response => response.data ) //서버에서 받은 데이터를 리퀘스트에 저장
	return {
		type: LOGIN_USER, 
		payload: request
	}
}