React를 경험해보자. 5탄

 

✏️React를 경험해보자 5탄

 

4탄에서 Provider를 통해 App에서 Store 접근을 할 수 있게 만들었다.

5탄에서는 리덕스를 이용해서 로그인 기능을 만들어보려고 한다. 

 

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 = (e) => {
    setEmail(e.currentTarget.value);
  };

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

  const onSubmitHandler = (e) => {
    e.preventDefault();

    let body = {
      email,
      password,
    };

    dispatch(loginUser(body)).then((res) => {
      if (res.payload.loginSuccess) {
        props.history.push("/");
      } else {
        alert("Err");
      }
    });
  };

  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 type="submit">Login</button>
      </form>
    </div>
  );
}

  

구현 완료된 로그인 페이지의 코드다. 

위에서부터 차례대로 코드를 보자면, 

 

const dispatch = useDispatch();

@returns — redux store's dispatch function 

 

useDispatch는 Store의 dispatch 기능을 사용할 수 있게 해주는 함수를 return 해준다.

 

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

 

 

[상태값, 상태값을 설정하는 함수] = useState('초기 설정 값')이다. 

 

jsx부분을 보면 input tag에 onChange={onEmailHandler} 코드가 있는데, 

onChange 이벤트가 실행되면 onEmailHandler 함수를 실행하고,

해당 함수안에서는 event.currentTarget.value 값을 setEmail 값에 저장하는 로직이다.

 

 

마찬가지로, form tag에도 onSubmit={onSubmitHandler} 코드가 존재하는데, 

버튼 클릭 시 아래 함수를 실행한다.

 

  const onSubmitHandler = (e) => {

    e.preventDefault();

    let body = {

      email,

      password,

    };

    dispatch(loginUser(body)).then((res) => {

      if (res.payload.loginSuccess) {

        props.history.push("/");

      } else {

        alert("Err");

      }

    });

  };

 

body 객체 안에 email, password를 저장하고 (축약문법 사용), 

dispatch 함수의 인자로 loginUser(body)를 전달한다. 

 

아래는 loginUser의 코드다.

 

import axios from "axios";
import { LOGIN_USER } from "./types";

export function loginUser(dataToSubmit) {
  const req = axios
    .post("/api/users/login", dataToSubmit)
    .then((res) => res.data);

  return {
    type: LOGIN_USER,
    payload: req,
  };
}

 

axios를 통해 post API를 호출하고, 받은 데이터를 payload로, type은 LOGIN_USER를 리턴해준다. 

체이닝이 많이 되어있다 보니까 조금 복잡한데, 이후 reducer 과정은 6탄에서 포스팅하겠다.