[TIL]최종 프로젝트 2주 차_수요일

유진·2023년 2월 15일

TIL

TIL Today I Learned

목록 보기

75/116

2023.02.15.(수)

TIL Today I Learned
해당 깃허브

Good: 메인페이지에서 마이페이지로 가는 것 구현, 마이페이지 기본적인 틀 잡기, 마이페이지 기능 구현을 시도한 것

Bad: 마이페이지 기능 구현을 그 전 프로젝트에서도 맡아서 자신 있다고 생각했다. 하지만 어렵다.

[ 최종 프로젝트 오류]

문제점: 어제 TIL을 보면 로그인 혹은 회원가입 완료 시 로그인 버튼이 로그아웃으로 변경 구현하였다. 로그인 버튼 누르고 user ID 값이 들어오면 로그아웃 버튼으로 바꿔줬는데, 새로고침(setTimeout)해야지 버튼이 바뀐다. 이 방법 말곤 없을까?

 {closeModal ? (
          <LoginButton onClick={closeModalButton}>로그아웃</LoginButton>
        ) : (
          <LoginButton onClick={closeModalButton}>로그인</LoginButton>
        )}

// 자바스크립트
  const logOut = () => {
    signOut(authService)
      .then(() => {
        // Sign-out successful.
        localStorage.clear();
      })
      .then(() => location.reload());
    setTimeout(customAlert('로그아웃에 성공하였습니다!'), 2000);
  };
 
 //jaX
         {authService.currentUser ? (
          <LoginButton onClick={logOut}>로그아웃</LoginButton>
        ) : (
          <LoginButton onClick={closeModalButton}>로그인</LoginButton>
        )}

해결점: useEffect 사용해서 최근 유저 정보를 가져온다. 유저 값이 있으면 로그아웃 버튼으로, 유저 값이 없으면 로그인 버튼으로 변경된다.

export default function Main() {
  const [currentUser, setCurrentUser] = useState(false); //최근 사용자
  const nowuser = authService.currentUser;
  
   useEffect(() => {
    if (authService.currentUser) {
      setCurrentUser(true);
    }
  }, [nowuser]); //nowuser에 값에 따라 로그인/로그아웃 버튼 변경
  
  
    const logOut = () => {
    signOut(authService).then(() => {
      localStorage.clear();
      setCurrentUser(false);
      customAlert('로그아웃에 성공하였습니다!');
    });
  };
  
          {currentUser ? (
          <LoginButton onClick={logOut}>로그아웃</LoginButton>
        ) : (
          <LoginButton onClick={closeModalButton}>로그인</LoginButton>
        )}