[인스타그램클론코딩] #5.4 requestSecret Mutation and Refactor

안녕하세요 

 

오늘은 로그인 기능을 구현해보겠습니다.

 

index.js

import AuthContainer from "./AuthContainer";

export default AuthContainer;

index.js가 실행되면, AuthContainer를 호출한다.

 

**export default 뜻

1) default export : default로 선언된 모듈은 파일에서 단 하나의 변수, 클래스만 export가 가능하다.

     - import는 아무이름이나 가능하다 ex) import hello from "./AuthContainer" 또는 import thisisAuth from "./AuthContainer"

 

2) named export : 한 파일 내에서 여러 변수 / 클래스들을 export 하는 것이 가능하다.

 

 

AuthContainer.js

import React, { useState } from "react";
import AuthPresenter from "./AuthPresenter";
import useInput from "../../Hooks/useInput";
import { useMutation } from "react-apollo-hooks";
import {LOG_IN} from "./AuthQueries";


export default () => {

    /* useState는 Hook이다
    Hook을 사용하여 변수의 상태값을 지정해준다 */
    const [action, setAction] = useState("logIn");
    const username = useInput("");
    const password = useInput("");
    const firstName = useInput("");
    const lastName = useInput("");
    const email = useInput("");
    const [requestSecret] = useMutation(LOG_IN, {
            variables: { email: email.value }
        }
    );

    const onLogin = e => {
        e.preventDefault();
        if(email !== ""){
            requestSecret();
        }
    }


    return (
        // AuthPresenter에 이 변수들을 전달
        <AuthPresenter 
            setAction={setAction} 
            action={action} 
            username={username}
            password={password}
            firstName={firstName}
            lastName={lastName}
            email={email}
            onLogin={onLogin}
            />
    );
};

여기서 중요한 부분은 AuthContainer --> AuthPresenter로 action, 이메일, 이름, 비밀번호, onLogin 함수를 인자값으로 보낸다.

onLogin 함수는 email을 입력받았을 경우 requestSecret 함수를 호출하는 것이다.

** 내가 신기한 부분은 requestSecret 함수를 인자로 보내는 것이다.

 

 

AuthPresenter.js

import React from "react";
import styled from "styled-components";
import Input from "../../Components/Input";
import Button from "../../Components/Button";

const Wrapper = styled.div`
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
`;

const Box = styled.div`
    ${props => props.theme.whiteBox}
    border-radius: 0px;
    width: 100%;
    max-width: 350px;
`;

const StateChanger = styled(Box)`
    text-align: center;
    padding: 20px 0px;
`;

const Link = styled.span`
  color: ${props => props.theme.blueColor};
  cursor: pointer;
`;

const Form = styled(Box)`
  padding: 40px;
  padding-bottom: 30px;
  margin-bottom: 15px;
  form {
    width: 100%;
    input {
      width: 100%;
      &:not(:last-child) {
        margin-bottom: 7px;
      }
    }
    button {
      margin-top: 10px;
    }
  }
`;

export default ({
    action,
    username,
    firstName,
    lastName,
    email,
    setAction,
    onLogin
}) => (
        <Wrapper>
            <Form>
                {action === "logIn" ? (
                    <form onSubmit={onLogin}>
                        <Input placeholder={"Email"} {...email} type="email"/>
                        <Button text={"Log in"} />
                    </form>
                ) : (
                    <form onSubmit={onLogin}>
                        <Input placeholder={"First name"} {...firstName}/>
                        <Input placeholder={"Last name"} {...lastName}/>
                        <Input placeholder={"Email"} {...email} type="email"/>
                        <Input placeholder={"Username"} {...username}/>
                        <Button text={"Sign up"} />
                    </form>
                )}
            </Form>
            <StateChanger>
                {action === "logIn" ? (
                    <>
                        Don't have an account?{" "}
                        <Link onClick={() => setAction("signUp")}>Sign up</Link>
                    </>
                ) : (
                    <>
                        Have an account?{" "}
                        <Link onClick={() => setAction("logIn")}>Log in</Link>
                    </>
                )}
            </StateChanger>
        </Wrapper>

);

Form에서 버튼 클릭시 onSubmit 함수를 실행한다. 이 때 onLogin 함수가 실행되어 requestSecret을 실행하여 서버에서 아이디를 조회를 한다. 

 

입력화면

출력화면

 

AuthQueries.js

import { gql } from 'apollo-boost';

export const LOG_IN = gql`
    mutation requestSecret($email: String!){
        requestSecret(email: $email)
    }
`;

AuthContainer에서 LOG_IN 쿼리를 호출하면 저렇게 PRISMA 서버를 호출한다.