프로필 변경을 해보자.

get

먼저 현재 유저의 트윗을 가져와보자.
Router

<Route exact path="/profile">
  <Profile userObj={userObj}/>
</Route>

이를 위해서는 당연히 userObj를 props로 받아야한다.
그리고 uid를 통해 쿼리문을 작성해보자.
Profile

const getOwnHoits = async () => {
  const hoits = await dbService
  .collection("hoits")
  .where("creatorId", "==", userObj.uid)
  .orderBy("createdAt")
  //index 필요 콘솔 에러메세지에서 링크 이동해서 적용
  .get();
  console.log(hoits.docs.map((doc) => doc.data()));
};
useEffect(() => {
  getOwnHoits();
}, []);

이런식으로 데이터를 쿼리할 수 있다.

Update

파베의 유저는 두개의 변경값밖에 없다. displayname과 photoURL, 부족하다 느끼면 컬렉션에 users를 추가해주면 된다.
네비게이션에 먼저 displayname이 나오게 한다.
Profile

const onChange = (e) => {
    const {
      target: { value },
    } = e;
    setNewDisplayName(value);
  };
  const onSubmit = async () => {
    if (userObj.displayName !== newDisplayName) {
      await userObj.updateProfile({
        displayName: newDisplayName,
      });
    }
    console.log("변경완료!");
  };
//
<form onSubmit={onSubmit}>
  <input type="text" onChange={onChange} value={newDisplayName} />
  <input type="submit" vlaue="Update Profile" />
</form>

새로운문제는 실시간으로 네비게이션이 바뀌지 않는다는 것이다.
App에서 userObj를 watch할수 있도록 해보자.
App

const refreshUser = () => {
    const user = authService.currentUser;
    setUserObj({
      displayName: user.displayName,
      uid: user.uid,
      updateProfile: (args) => user.updateProfile(args),
    });
  };

setUserObj(user)을 할수도있지만 적용은 되지 않는다. 왜냐하면 크기가 너무 크기때문에 리액트가 결정장애에 빠진다.