[React] 아이디 기억하기

Lee 🧙🏻‍♂️·2021년 6월 23일
0
post-thumbnail

Cookie에 id 저장하기

처음에는 간단하게 밑에 있는 코드를 보면 알 수 있지만, 로그인할 때 cookie에 id 값이 저장되어 있다면
id 칸에 cookie의 값을 넣어주는 형태로 코드를 작성했었다.

if( cookies.user_id !== undefined ) {
            setUserInfo(prev => {return {...prev, id: cookies.user_id}});
            setSaveId(true);
        }

위와 같은 방법으로 코드를 작성해도 별문제는 없을 거 같지만, 로그인 시 user_id 값은 expires를 하루로 주기도 했고, 그래서 user_id 대신 로그인 시 save_id를 만들어 주고 expires도 30일로 주었다

useEffect(() => {
//아이디 저장 체크할 경우 실행
        if(cookies.save_id){
            setUserInfo(prev => {return {...prev, id : Cookies.get('save_id')}});
            setSaveId(true);
        }
}

        if(saveId === true){ //아이디 저장 체크일 때
            setUserInfo(prev => {return {...prev, id: cookies.save_id}});

            if(cookies.save_id){ //이미 저장되어 있을 때
                let cookie_id = Cookies.get('save_id')

                if(userInfo.id !== cookie_id){ //쿠키에 저장된 아이디가 다를 때(30일)
                    Cookies.set('save_id', userInfo.id, {path: '/', expires: 30});
                }
            }else{
                Cookies.set('save_id', userInfo.id, {path:'/', expires: 30});
            }
        }else{
            if(cookies.save_id){
                removeCookie('save_id');
            }
        }

    const handleOnChange = (e) => {
        setSaveId(e.target.checked);
    }
    
    return(
      <input type="text" placeholder="아이디" name="id" value={userInfo.id} onChange={Check}/>
      <input type="checkbox" onChange={handleOnChange} checked={saveId} id="saveId" name="saveId"/>
      	<label className="ml-2" htmlFor="saveId">아이디 저장</label>
)
    

저는 이런 방식으로 구현했지만 이게 좋은 방법인지도 잘 모르겠습니다. 더 좋은 방법이 생각이 난다면 다시 와서 수정하도록 하겠습니다.

profile
더 나은 개발자가 되기 위해 기록합세!🧙🏻‍♂️

0개의 댓글