Local Storage에 저장된 키값이 사라지는 오류

❓ Local Storage에 저장된 Key 값이 사라진다?! Key값 도둑 잡아라!

소셜 로그인 기능을 구현하면서 계속해서 로컬스토리지에 잘 저장된 key값이 계속 사리지는 에러가 발생을 하였다. 아무리 생각을 하고 구글링을 해봐도 이유를 알 수가 없었다.

const insertedToken = localStorage.getItem('access_token');

const logoutToken = localStorage.removeItem('access_token');



const Nav = () => {
  const navigate = useNavigate();

  return (
    <NavUl>
      <NavLi>고객센터</NavLi>
      <NavLi>관심상품</NavLi>
      <NavLi>마이페이지</NavLi>
      {insertedToken ? (
        <NavLi onClick={logoutToken}>로그아웃</NavLi>
      ) : (
        <NavLi onClick={() => navigate('/login')}>로그인</NavLi>
      )}
    </NavUl>
  );
};

export default Nav;

그러다가 결국 멘토님께 도움을 요청했고 멘토님의 도움으로 해결할 수 있었다. 이유는 너무나도 간단했다. 그것은 바로 기초 지식이었다.

localStorage.removeItem('access_token')를 버튼이 클릭도 안하고 작동이 되며 삭제가 되는 이유는 내가 바로 상수에 넣어줬기 때문이었다. 버튼을 클릭했을 때 작동하는 함수형태가 아니라, 그저 위에서 이렇게 값을 담았지라면서 생각없이 코드를 치다보니 생긴 에러였다.
결국 나는 아직 코드를 배우기 시작한 초심자면서 제대로 코드 한 줄 한 줄의 의미를 상기하며 치지 않기 떄문에 이러한 어이없는 의도치 않은 결과가 발생한 것이다.
앞으로 코드를 작성할 때면 이 코드의 의미가 정확히 무엇인지 파악을 하면서 코드를 쳐야지 이러한 실수를 피할 수 있을 것이다.