React

[TIL/React] 2023/09/15

오늘의 myTask 🟡auth data를 활용하여 AppBar의 UI를 변경하기로 했으나, '로그아웃'을 구현하는 것이 선행되어야 한다고 생각했다. pedro 형님이 firebase에서 signOut 함수를 가져오고 있음을 확인했다. signOut 함수에 auth를

2023년 9월 15일1min read

오늘의 myTask 🟡

auth data를 활용하여 AppBar의 UI를 변경하기로 했으나, '로그아웃'을 구현하는 것이 선행되어야 한다고 생각했다.

pedro 형님이 firebase에서 signOut 함수를 가져오고 있음을 확인했다. signOut 함수에 auth를 투입하고 있다. authSlice에 간단히 적용해 보자.

간단한 로그아웃 thunk 함수를 생성하고, 그에 맞게 addCase를 추가했다. 일단은 아무 곳에나 로그아웃 버튼을 만들어서 test를 해야겠다고 생각했다.

home에 테스트용 로그아웃 버튼을 만들었다. 기존에, 로그인에 성공했다면 로그인 페이지에 접근하지 못하도록 처리를 했다. 따라서 로그아웃 테스트 버튼이 제대로 작동한다면, 로그인 페이지로 다시 접근이 가능해야 할 것이다.

테스트 버튼을 클릭하면, state가 예상한대로 변한다. 물론 로그인 페이지에도 접근이 가능해졌다.

isAuthenticated를 false로 변환하기에, 위 useEffect가 적용되지 않기 때문이다.