[오늘 한 일]
- 알고리즘 1문제 풀기
- 회원가입 기능 구현
- 회원가입 시 input value 실시간 유효성 검사
- 현재 로그인한 user 정보 react-query의 [user] 라는 쿼리키로 만들기
- 마이페이지에 user 정보 뿌려주기
- 마이페이지에 user가 등록한 설문 뿌려주기
- 헤더 아바타 클릭시 마이페이지, 설문 등록, 로그 아웃 할 수 있는 드롭 다운
리액트 쿼리로 현재 로그인한 user 의 정보를 전역 서버 상태 관리 하고 싶어서
이것 저것 해보다가 시간을 많이 잡아먹었다....
리액트 쿼리로 전역 서버 상태 관리
// api/users
export const getUserByEmail = async userEmail => {
const q = query(collection(db, 'users'), where('email', '==', userEmail));
try {
const querySnapshot = await getDocs(q);
if (querySnapshot.docs.length > 0) {
const userData = {id: querySnapshot.docs[0].id, ...querySnapshot.docs[0].data()};
return userData;
}
} catch (error) {
console.error('Error fetching user:', error);
}
return null;
};// MyPage.jsx
const {data: user} = useQuery({
queryKey: ['user'],
queryFn: () => getUserByEmail(auth.currentUser.email),
});이렇게 하니까 console.log(user) 했을 때 현재 로그인 한 유저의 정보 (파이어베이스 도큐먼트 아이디를 포함한) 를 잘 찍는 것을 확인했다.
그리고 원래 회원가입 할 때 useForm 이라는 커스텀 훅을 만들어서 사용하려고 했는데, 실시간 유효성 검사를 위해 각각의 인풋의 onChange에 다른 함수를 적용하고 싶어서 결국 따로 뺐다.
실시간 유효성 검사
처음에 setEmail(e.target.value) 를 통해 받아온 email 이라는 state로 유효성 검사 로직을 만들고 있는데 자꾸 한 박자씩 늦게 콘솔에 찍히는거다..!!!! 잘 모르겠어서 챗GPT 선생님께 여쭤봤다.
[챗GPT 선생님의 답변]
setState 함수는 비동기로 동작하기 때문에 setState 호출 후에 상태가 즉시 업데이트되지 않을 수 있습니다. 따라서 console.log(email)와 setEmail(e.target.value) 사이에는 이전 상태 값이 그대로 사용될 수 있습니다. 이것이 콘솔에 찍히는 값이 업데이트된 값이 아닌 이전 값으로 나타나는 이유입니다.
이러한 비동기 동작은 React의 성능 최적화 및 일관성을 유지하기 위한 메커니즘입니다. setState가 즉시 동기적으로 작동한다면, React가 컴포넌트 업데이트를 일관되게 처리하기 어려워질 수 있습니다.
따라서, setState 함수의 비동기적인 특성을 이해하고, setState의 콜백 함수를 활용하여 상태 업데이트 후에 원하는 작업을 수행하도록 할 수 있습니다.
// 수정된 버전
const onChangeEmail = e => {
setEmail(() => {
const newEmail = e.target.value;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!newEmail) setEmailError('이메일 아이디를 입력해주세요.');
else if (!emailRegex.test(newEmail)) setEmailError('올바른 이메일 형식이 아닙니다.');
else setEmailError('');
return newEmail;
});
};선생님의 말씀을 참고하여 setEmail에서 콜백함수를 활용하여 현재 상태 값을 사용할 수 있도록 수정했다..
갈 길이 멀다....
아주 빨리빨리 이해하고 이해한 걸 바로바로 적용하는 사람이 못되어서..
엉덩이로 싸우는 중이다(?)
안되면 되게하라..!!!!
