FrontendLogin

React 로그인 Modal 만들기 4 - 비동기 처리

React 로그인 Modal 만들기 4 - 비동기 처리

import axios from "axios";
import React, { useState, useCallback } from "react";
import {
  LoginBody,
  LoginFooter,
  LoginHeader,
  ModalBackGround,
  ModalBox,
} from "../assets/css/login";

const LoginTemplate = ({ open, close }) => {
  const [form, setForm] = useState({
    email: "",
    password: "",
  });

  const onChange = useCallback(
    (e) => {
      setForm({
        ...form,
        [e.target.name]: e.target.value,
      });
    },
    [form]
  );

  const onClick = useCallback(
    (e) => {
      axios
        .post("/api/login", form)
        .then((response) => {
          console.log(response);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    [form]
  );

  return open ? (
    <ModalBackGround>
      <ModalBox>
        <LoginHeader>
          로그인
          <button className="close" onClick={close}>
            {" "}
            &times;{" "}
          </button>
        </LoginHeader>
        <LoginBody className="login-body">
          <div>
            <input
              id="email"
              name="email"
              type="email"
              placeholder="Email"
              onChange={onChange}
            />
          </div>
          <div>
            <input
              id="password"
              name="password"
              type="password"
              placeholder="Password"
              onChange={onChange}
            />
          </div>
        </LoginBody>
        <LoginFooter>
          <button onClick={onClick}>로그인</button>
        </LoginFooter>
      </ModalBox>
    </ModalBackGround>
  ) : null;
};

export default LoginTemplate;
import React, { useCallback, useState } from "react";
import { ModalBox } from "../assets/css/login";
import axios from "axios";
import {
  ModalBackGround,
  SignUpBody,
  SignUpFooter,
  SignUpHeader,
} from "../assets/css/signup";

const SignUpTemplate = ({ open, onChangeOpen }) => {
  const [form, setForm] = useState({
    username: "",
    email: "",
    password: "",
  });

  const onChange = useCallback(
    (e) => {
      setForm({
        ...form,
        [e.target.name]: e.target.value,
      });
    },
    [form]
  );

  const onClickSignUp = useCallback(() => {
    axios.post("/api/signup", form).then((Response) => {
      console.log(Response);
    });
  }, [form]);

  return open ? (
    <ModalBackGround className="signup-modal-box">
      <ModalBox>
        <SignUpHeader>
          회원 가입
          <button className="close" onClick={onChangeOpen}>
            {" "}
            &times;{" "}
          </button>
        </SignUpHeader>
        <SignUpBody>
          <div>
            <input
              type="username"
              id="username"
              name="username"
              placeholder="이름"
              onChange={onChange}
            />
          </div>
          <div>
            <input
              type="email"
              id="email"
              name="email"
              placeholder="Email"
              onChange={onChange}
            />
          </div>
          <div>
            <input
              type="password"
              id="password"
              name="password"
              placeholder="Password"
              onChange={onChange}
            />
          </div>
        </SignUpBody>
        <SignUpFooter>
          <button onClick={onClickSignUp}>회원가입</button>
        </SignUpFooter>
      </ModalBox>
    </ModalBackGround>
  ) : null;
};

export default SignUpTemplate;
Share