[React] cookie 적용 시간 처리

주말동안 메인페이지를 만드는 작업을 진행했는데, 메인페이지에서 로그인 여부에 따른 버튼 노출을 처리하면서 겪은 트러블 슈팅 기록이다.

 

로그인 이전에는 회원가입과 로그인 버튼을 노출시키고 로그인 이후에 쿠키에 토큰이 들어가면 회원정보를 담은 프로필과 로그아웃 버튼을 노출시켜야 하는데, 리액트에서 쿠키를 사용해본 경험이 없다보니 적용을 처리하는 데에 에러를 겪었다.

 

로그인 이전에 노출

 

로그인 이후에 노출

 

 

쿠키에 토큰이 정상적으로 들어가고 난 이후에 노출되었다면 로그인 시 즉시 적용되어야 하는데, 새로고침을 해야 쿠키가 들어간 것이 적용되었다. 분명 useEffect 훅을 사용하고 있는데도 이런 일이 발생하는 것이 이상했다. 로딩 상태를 관리 하는 코드도 적용해봐도 별다른 차도가 없어서 어떻게 해야하는지 고민하던 차, useEffect의 의존성 배열을 사용하면 해결할 수 있다는 것을 알게되었다.

 

쿠키에 토큰이 들어가면 다시 작동하는 것이다. 사용자가 느끼기엔 찰나의 순간일 것이고 정상적으로 적용할 수 있었다. 이전 Nest.js 프로젝트에서 useEffect의 의존성배열을 사용할 때 runtime Error를 겪었기에 사용을 꺼리고 있었고, 정확한 사용법도 몰랐는데 이번 기회에 조금 더 익히게 되어서 좋았다.

 

그리고 로그아웃도 react-cookie의 useCookie 훅을 이용해서 처리할 수 있었는데, 이전에는 세션로그인만 사용해봐서 익숙치 않았는데 사용할 기회가 생겨서 좋은 프로젝트 경험이 되었다. useCookie의 remove 메소드를 사용해서 cookie에 들어간 토큰을 없에주니 정상적으로 회원가입 버튼과 로그인 버튼이 노출되어서 유저의 로그아웃을 처리할 수 있었다.