처음에는 간단하게 밑에 있는 코드를 보면 알 수 있지만, 로그인할 때 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>
)
저는 이런 방식으로 구현했지만 이게 좋은 방법인지도 잘 모르겠습니다. 더 좋은 방법이 생각이 난다면 다시 와서 수정하도록 하겠습니다.