[React & NodeJS]공부#5
날짜 : 21.06.25
참고 강의
[React.js]
1. 로그인 페이지
- LandingPage.js(시작페이지) 수정
import React, { useEffect } from 'react';
import axios from 'axios';
function LandingPage() {
useEffect(() => {
axios.get('/api/hello')
.then(response => console.log(response.data))
}, []);
return (
<div style={{
display: 'flex', justifyContent: 'center', alignItems: 'center',
width: '100%', height: '100vh'
}}>
<h2>시작 페이지</h2>
</div>
)
}
export default LandingPage;
- [LoginPage.js] retrun 부분 먼저 생성 -> 페이지의 틀
return (
<div style={{
display: 'flex', justifyContent: 'center', alignItems: 'center',
width: '100%', height: '100vh'
}}>
<form style={{ display: 'flex', flexDirection: 'column' }}
>
<label>Email</label>
<input type='email' value={} onChange={} />
<label>Password</label>
<input type='password' value={} onChange={} />
<br />
<button>
Login
</button>
</form>
</div>
)
🔽 결과화면 🔽
- [LoginPage.js]의 funtion LoginPagestate()에 state 생성
function LoginPage() {
const [Email, setEmail] = useState("");
const [Password, setPassword] = useState("");
}
- 타이핑을 할 때 onChange의 이벤트 발생하여 state 발생 후 value 변경
-> [LoginPage.js] funtion LoginPagestate()
function LoginPage() {
const [Email, setEmail] = useState("");
const [Password, setPassword] = useState("");
const onEmailHandler = (event) => {
setEmail(event.currentTarget.value)
};
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value)
};
}
- onSubmitHandler -> 로그인 정보 입력 시 refresh 방지
function LoginPage() {
const [Email, setEmail] = useState("");
const [Password, setPassword] = useState("");
const onEmailHandler = (event) => {
setEmail(event.currentTarget.value)
};
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value)
};
const onSubmitHandler = (event) => {
event.preventDefault(); // 페이지 refresh 방지
let body = {
email: Email,
password: Password,
};
}
- [LoginPage.js] return의 value, onChange, onSubmit 수정
...
...
<form style={{ display: 'flex', flexDirection: 'column' }}
onSubmit={onSubmiHandler}
>
<label>Email</label>
<input type='email' value={Email} onChange={onEmailHandler} />
<label>Password</label>
<input type='password' value={Password} onChange={onPasswordHandler} />
<br />
<button>
Login
</button>
</form>
...
...
2. Redux를 사용한 정보 전달
- [LoginPage.js]에 dispatch를 통해 action 생성
import { useDispatch } from 'react-redux';
function LoginPage{
...
...
const dispatch = useDispatch();
dispatch(loginUser(body))
.then(response => {
if (response.payload.loginSuccess) {
props.history.push('/')
} else {
alert('Error')
}
});
}
- [_actions]-[user_action.js] 파일 생성
import axios from 'axios';
import {
LOGIN_USER
} from './types';
export function loginUser(dataToSubmit) {
const request = axios.post('/api/users/login', dataToSubmit)
.then(response => response.data)
return {//reducer로 전송
type: "LONGIN_USER",
payload: request,
}
}
- [_actions]-[types.js] 파일 생성
export const LOGIN_USER = "login_user";
- [_reducers]-[user_reducer.js] 파일 생성
import {
LOGIN_USER
} from '../_actions/types';
export default function (state = {}, action) {
switch (action.type) {
case LOGIN_USER:
return { ...state, loginSuccess: action.payload }
break;
default:
return state;
}
}
- [_reducers]-[index.js] 수정
// rootReducer에 Reducer들을 합체
import { combineReducers } from "redux";
import user from './user_reducer';
const rootReducer = combineReducers({
user,
})
export default rootReducer;
- [LoginPage.js] 최종 코드
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { loginUser } from '../../../_actions/user_action'
function LoginPage(props) {
const dispatch = useDispatch();
const [Email, setEmail] = useState("");
const [Password, setPassword] = useState("");
const onEmailHandler = (event) => {
setEmail(event.currentTarget.value)
};
const onPasswordHandler = (event) => {
setPassword(event.currentTarget.value)
};
const onSubmitHandler = (event) => {
event.preventDefault(); // 페이지 refresh 방지
let body = {
email: Email,
password: Password,
};
dispatch(loginUser(body))
.then(response => {
// 로그인 성공 시 첫 페이지로 이동
if (response.payload.loginSuccess) {
props.history.push('/')
} else {
alert('Error')
}
})
};
return (
<div style={{
display: 'flex', justifyContent: 'center', alignItems: 'center',
width: '100%', height: '100vh'
}}>
<form style={{ display: 'flex', flexDirection: 'column' }}
onSubmit={onSubmitHandler}
>
<label>Email</label>
<input type='email' value={Email} onChange={onEmailHandler} />
<label>Password</label>
<input type='password' value={Password} onChange={onPasswordHandler} />
<br />
<button>
Login
</button>
</form>
</div>
)
}
export default LoginPage
- redux로 결과 확인
Full Code
Walang Github
Walang Notion
Author And Source
이 문제에 관하여([React & NodeJS]공부#5), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ganzi410/React-NodeJS공부5저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)