[localStorage] 로그인상태

처음엔 localStorage에 로그인상태(게스트,회원)를 담아 헤더의 UI를 변경하려고 했다

하지만 내부의 상태로만 동적으로 화면을 그리는 react의 특정상

새로고침이 생기기 전까진 브라우저의  localStorage만으로는 화면을 바꿀 수 없었다...

const [isLoggedIn, setIsLoggedIn] = useState(false)

때문에 로그인 상태를 담은 useState를 만들어서 서로 연결시켜주는 방법이 있다

이 방법은 localStorage가 아닌 전역이나 props로 react 내부에서 처리하는 것이기 때문에

localStorage를 쓰고 싶은 내 의도와는 달랐다

 

그래서 로그인 후 메인페이지로 이동해서 새로고침되게끔 했다

localStorage.setItem('userStatus', 'user');
router.push('/');
window.location.reload();

1. localStorage에 값을 넣어주고

2. 메인페이지로 이동한 후

3. 페이지를 새로고침한다

 

이게 생각했던 처리 순서였지만...

이게 무슨 일인가!

새로고침만 되고 메인페이지로 이동하지 않는다는 문제가 생겼다

 

찾아보니

router.push('/')

이 코드는 비동기 함수로, 따로 빠져서 처리하기 때문에

그 틈에 새로고침이 돼버리는 상황이였다

 

🤔 그럼 새로고침 끝나고 메인페이지로 이동되는 거 아닌가? 싶었는데

상대는 새로고침이였다

화면을 다시 그리고 다시 호출시키는 것

 

router.push가 전달받은 일을 처리하다가

새로고침이 중간에 "다시 해줘!" 빠꾸시켜버린거다

 

localStorage.setItem('userStatus', 'user');
window.location.href = '/';

그래서 이동과 새로고침을 하나로 묶었다

react 기능으로 전환하지 않고,

브라우저 자체 페이지 교체를 해주는 구문이라고 한다

 

잘 된다!