[졸업작품 회고 -1] React cookie 사용하여 아이디 저장하기

로그인 시 아이디가 저장되는 기능을 구현하기 위해 React-cookie를 사용하였다.

1) react cookie를 install한다.

npm install react-cookie

2) 코드

const [saveID, setSaveID] = useState(false); //아이디 저장 여부 
const [cookies, setCookie, removeCookie] = useCookies(["rememberEmail"]); //remeberEmail 이름으로 쿠키 저장

useEffect(() => {
    	/*저장된 쿠키값이 있으면 check 이모티콘 TRUE 및 email에 값 세팅*/
        if (cookies.rememberEmail !== undefined) {
            setEmail(cookies.rememberEmail); //이메일 값 저장 
            setSaveID(true); //check 이모티콘 true
        }
    }, []);

const handleSaveID =(newSaveID)=>{
	if (newSaveID) {
    	setCookie("rememberEmail", email, { path: "/", expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) }); //7일 유지
   	} else {
    	removeCookie("rememberEmail"); 
 }

//css
<CheckImoji
    onClick={() => {
  		setSaveID((prev) => { // useState는 비동기적으로 동작 => 다음 렌더링에서 새로운 값이 적용
  		const newSaveID = !prev;
  		handleSaveID(newSaveID); //새로운 값을 계산함 
  		return newSaveID;
  	});
  }} />

3) App.js를 < CookieProvider >로 감싸주어야한다.

결과

한번 로그인 성공 후 다시 로그인페이지에 가보면 이메일 필드와 아이디저장 체크표시가 잘 세팅되어있는 것을 확인할 수 있다.

개발자도구 > Application > Cookie에서 쿠키를 확인할 수 있다.