[LAB-11] 회원가입 firestore 추가 시 시점관련 오류

[seovee]

질문 작성자

김진섭

문제 상황

안녕하세요 LAB 11 김진섭입니다.

회원가입 페이지를 제작하고 있습니다. 현재 회원가입 Authentication까지는 완료했고, 그 가입정보가 firestore로 바로 업데이트가 되지 않고 다음 회원가입 시 업데이트가 되어 질문드립니다.

<첫번째 가입>

<두번째 가입>

-> 두번째 가입이 완료되면 그때 첫번째 가입정보가 Firestore에 저장됩니다.

<코드 일부분 캡쳐>

-> 현재 이슈 해결을 위해 커밋을 해둔 상태이고, 관련된 파일은 SignUpPage.jsx부분입니다. -> 파일은 nodemodule을 제외하고 쌤 DM에 전송해두겠습니다.

프로젝트 저장소 URL

• https://github.com/likeLion-FE4-RP11/Asparagus
• feature/SignUp-firestore
• 트러블 슈팅을 위해 node_modules 폴더를 제외한 나머지를 압축해 이 곳에 첨부하세요.

환경 정보

• Mac
• Node.js 정보 (예: v16.14.0)
• 라이브러리 정보 (예: React v18.0.2)

[yamoo9]

문제 확인

리액트 상태 업데이트에 대해 정리해야 문제를 이해할 수 있습니다. 🤔 https://github.com/yamoo9/likelion-FEQA/issues/225#issuecomment-1483761239 답변 글을 참고하세요.

문제 해결

SignUpPage.jsx 파일에 작성된 코드를 아래와 같이 변경해보세요.

SignUpPage.jsx

const SignUpSubmit = async (e) => {
  e.preventDefault();

  const { name, email, password, passwordConfirm } = formStateRef.current;

  // 회원 가입 요청
  await signUp(email, password, name);
};

useEffect(() => {
  // user 상태 값이 변경, 유효한 값일 경우
  if (user) {
    (async () => {
      const { name, email } = formStateRef.current;
      // Firestore 데이터베이스에 사용자 정보 추가
      await createAuthUser(user, { name, email });
    })();
  }
}, [createAuthUser, user]);

그러면 아래 영상처럼 회원가입과 Firestore 데이터베이스에 사용자 정보가 저장되는 것을 확인할 수 있습니다.

https://user-images.githubusercontent.com/1850554/227711647-3acc29a4-c225-4a45-9e6b-8300d65739c7.mp4

가이드 파일

첨부된 가이드 파일을 다운로드 받아 확인해보세요.

src.zip

[seovee]

감사합니다!!