[React+Vite/TS] 에러핸들링과 로그인, 공통 컴포넌트 분리하기

1. 회원가입 시 catch 문에 에러핸들링 작성

catch (e) {
      // 에러 핸들링
      // FirebaseError 클래스의 에러인 경우 (e.g. 이메일 중복 등..)
      if (e instanceof FirebaseError) {
        setError(e.message);
      }

  

이미 가입된 이메일로 가입 시도를 하는 경우, 에러를 콘솔에 찍어보면 아래와 같이 나온다.

 

위의 FirebaseError 를 살펴보면 code와 name, Error가 extends 됐기 때문에 message가 있는 것을 확인할 수 있다.

 

따라서 에러가 catch될 때, 설정해두었던 Error 상태에 이 FirebaseError의 message를 코드와 같이 set 해준 후,

중복 이메일로 회원 가입 등 에러를 발생시키면

 

이와 같이 간단하게 에러를 화면에 표기해줄 수 있다! 'Firebase: ' 같은 문자열은 잘라내주면 더 좋을 것 같다.

 

추가로 회원가입 버튼을 다시 눌렀을 때를 고려하여, 회원가입 버튼을 눌렀을 때 Error 상태를 초기화해주자!

// 에러가 이미 표시된 경우가 있으니, Submit 시 초기화 해준다
    setError("");

 

 

2. 로그인 화면

로그인 화면은 회원가입 파일을 그대로 복사 붙여넣기 해주고, 회원가입에서만 사용하는 부분을 잘라내서 사용했다.

이 경우 로그인 버튼을 눌렀을 때, signInWithEmailAndPassword(auth: Auth, email: string, password: string) 함수를 사용해준다.

try {
      setLoading(true);
      // UserCredential 반환
      await signInWithEmailAndPassword(auth, email, password);
      // 홈페이지로 redirect
      navigate("/");
    }

 

 

3. 공통 컴포넌트 분리

로그인 화면 구현 시, 회원가입 화면을 가져와 수정했기 때문에 동일한 컴포넌트를 사용하고 있다.

로그인과 회원가입 화면에서 같이 쓰는 컴포넌트를 전부 삭제하고, components 폴더에 auth-components.ts 를 생성하여 모두 export 해주고, 각 화면에서 이 컴포넌트를 import 해주면 중복된 컴포넌트 코드를 줄일 수 있다.

 

 

4. 이미 회원이신가요? & 아직 회원이 아니신가요? 이동 링크 

<Switcher>
        아직 회원이 아니신가요?{" "}
        <Link to="/create-account">회원가입 &rarr;</Link>
</Switcher>

 

각 컴포넌트 최하단에 위와 같은 Switcher 컴포넌트를 만들어주자