[React] 로그인할떄 쿠키 저장하기

* 동작원리

- 로그인 페이지에서 id,pw 입력

- 로그인 버튼 

- 로그인 성공 시 user_id , user_pw 로 쿠키 저장하기

 

// 키값 기준으로 쿠키에 저장된 값을 가져오는 함수
const getCookie = (name) => {
  // 쿠키 값을 가져옵니다.(name)
  let value = "; " + document.cookie;
  // 키 값을 기준으로 파싱합니다.(";"기준으로)
  let parts = value.split("; " + name + "=");
  // value를 return!
  if (parts.length === 2) {
		return parts.pop().split(";").shift();
	}
};

// 쿠키에 저장하는 함수
const setCookie = (name, value, exp = 5) => {
  let date = new Date();
  // 날짜 생성
  date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);
  // 저장!  setTime()은 1970년1월1일부터 경과된 시간을 밀리초로 수정함 (날짜정보를 수정)
  //getTime()은 1970년1월1일부터 경과된 시간을 밀리초로 표기함 (날짜정보를 가져올떄)
  document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
  //toUTCString()은 UTC 표준 시간대를 사용하여 지정된 날짜를 나타내는 문자열
};

// 만료일을 예전으로 설정해 쿠키를 삭제
const deleteCookie = (name) => {
  document.cookie = name + '=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';
}

export { getCookie, setCookie, deleteCookie };

 

import React from "react";
import { Button, Grid, Input, Text } from "../elements";
import { setCookie } from "../shared/Cookie";

const Login = (props) => {
    const [id, setId] = React.useState('');
    const [pwd, setPwd] = React.useState('');

    const changeId = (e) => {
        setId(e.target.value);
    }

    const changePwd = (e) => {
        setPwd(e.target.value);
    }

    const login = () => {
        setCookie("user_id", id, 3);
        setCookie("user_pwd", pwd, 3);
        //("변수이름", 변수값, 기간)
    }
    return (
        <React.Fragment>
            <Grid padding={16}>
                <Text type="heading">로그인 페이지</Text>
            </Grid>
            <Grid padding={16}>
                <Input value={id} onChange={changeId} placeholder="아이디를 입력하세요."/>
                <Input value={pwd} onChange={changePwd} type="password" placeholder="비밀번호를 입력하세요."/>
            </Grid>

            <Button __click={() => {login();}}>로그인</Button>
        </React.Fragment>
    )
}

export default Login;