Closed rlawlsdn263 closed 1 year ago
useCurrentUser 훅이 함수 컴포넌트 내부에 작성되어 있었습니다.
useCurrentUser 훅을 컴폰넌트 외부로 분리하고 아래와 같이 작성합니다.
function useCurrentUser() {
const [currentUser, setCurrentUser] = useRecoilState(currentUserAtom);
useEffect(() => {
onAuthStateChanged(auth, (user) => {
if (user) {
const currentUser = {uid: user.uid, email: user.email};
console.log(currentUser);
setCurrentUser(currentUser);
}
});
}, [setCurrentUser]);
return currentUser;
}
그리고 컴포넌트 코드는 아래처럼 작성합니다.
function Register() {
// ...
const userObject = useCurrentUser();
async function handleCheckRegister() {
if (email === "" || emailVisible === true) {
console.log("응 이메일 탈락~");
return;
} else if (password === "" || passwordVisible === true) {
//...
} else {
console.log("이야 이걸 통과하네ㅋ");
await registerUser();
await addUserCollection(name, mobile, email);
}
}
// /* 파이어베이스 회원가입 기능 */
async function registerUser() {
try {
const user = await createUserWithEmailAndPassword(auth, email, password);
console.log("회원가입 성공!", user);
} catch (error) {
console.log(error.message);
}
}
async function addUserCollection(name, mobile, email) {
await setDoc(doc(db, "users", "a"), {
name: name,
mobile: mobile,
email: email,
});
console.log("사용자 정보 추가");
}
return (<> ... </>);
}
그러면 아래처럼 정상적으로 작동합니다. 😊 Firestore 데이터베이스에 사용자 정보가 저장되는 지는 직접 확인 바랍니다. (저는 볼 수 없어요 😅)
첨부된 가이드 파일을 다운로드 받아 확인해보세요.
야무쌤 감사합니다! 성공적으로 유저 컬렉션이 만들어지는 걸 확인했습니다. 추가 질문이 있는데
function useCurrentUser() {
const [currentUser, setCurrentUser] = useRecoilState(currentUserAtom);
useEffect(() => {
onAuthStateChanged(auth, (user) => {
if(user) {
const currentUser = {uid: user.uid, email: user.email};
console.log(currentUser);
setCurrentUser(currentUser);
}
});
}, [setCurrentUser]);
return currentUser;
}
useCurrentUser()을 내부에서 setCurrentUser()가 실행되면 currentUser 상태변수가 업데이트 하게끔 해줬습니다. 그렇다면 currentUser 상태변수에는 새로 업데이트된 값이 들어가 있어야 할 텐데 콘솔창으로 확인을 해보니 onAuthStateChanged()가 실행됐음에도 currentUser 상태변수는 여전히 비어있었습니다.
리액트에서 currentUser 값을 비동기적으로 업데이트해줘서 그런 걸까요?
@rlawlsdn263 님
리액트 상태 업데이트는 즉시 이뤄지지 않습니다. 🤔 이번 프로젝트 진행하면서 자주 받는 질문이다 보니 별도로 "상태 업데이트" 레이블을 추가했어요.
useCurrentUser
훅이 반환하는 currentUser
상태 값이 업데이트 된 이후, 콜백(실행) 하려면?
useEffect 훅을 사용해주세요. 그래야 상태가 업데이트 됨을 보장할 수 있습니다.
const currentUser = useCurrentUser();
useEffect(() => {
console.log("useEffect 내부:", currentUser);
}, [currentUser]);
아래 Console 패널에 출력된 currentUser
값을 보면 상태가 업데이트 되면 콜백 됨을 확인할 수 있습니다. 😃
일반적인 사고로는 회원 가입하면 currentUser 상태가 업데이트 되었을 것 같지만, 리액트처럼 사고 해야 왜 상태가 바로 업데이트 되지 않는 지 이해할 수 있어요. 🥹 (Thinking in React)
질문 작성자
김진우
문제 상황
createUserWithEmailAndPassword()으로 회원가입 기능을 만들었습니다. 하지만 보다 다양한 유저 정보를 심어주고 싶어 회원가입이 되면 input값으로 들어간 데이터들이 심어진 유저 컬렉션을 만들려고 했습니다.
그래서 addUserCollection() 함수를 만들고 다음 조건에 적합하면 순차적으로 실행을 해주려고 했습니다.
하지만 다음처럼 에러가 발생해 생성이 되지 않고 있는 상황입니다ㅠ
프로젝트 저장소 URL
https://github.com/likelion-frontendo/likelion-saja/blob/feature%2Fjinwoo%2Fregister/src/pages/Register/Register.jsx