TR-9, Login & Logout 기능

오늘 한 작업

• 우선 서버와 상의했던 로직대로 로그인 및 로그아웃 기능을 완성했다.
• LocalStorage의 isLogin을 컴포넌트에서 받아오지 못했던 문제를 해결했다. → LocalStorage는 JSON 형태로 저장되기 때문에, isLogin이 true일 때를 isLogin이 아닌 isLogin === “true”와 같이 문자열로 입력을 해 줘야 했다. → 로그아웃 버튼을 클릭할 시 Navigate를 사용했을 때는 렌더링이 되지 않아 LocalStorage 데이터가 반영이 안됐다. Navigate가 아닌 window.location.replace(”/”)를 이용해서 재렌더링 시켜 LocalStorage 데이터를 반영시켰다.

let isLogin = localStorage.getItem("isLogin");

if (isLogin) {
  (isLogin이 true일 때 반영할 내용)
}

// 잘못된 방법.
// localStorage는 JSON이므로, isLogin으로 불리언 값인
// true로 조건을 판별하면 안된다.

if (isLogin === "true") {
  (isLogin이 true일 때 반영할 내용)
}

// 위와 같이 '문자열'인 "true"를 조건에 넣어줘야 한다.

어려웠던 부분

• 새로고침 마다 초기화되는 state대신 LocalStorage를 사용해서 발생하는 여러가지 오류 및 복잡도 때문에 살짝 애를 먹었다.