⚠️ 문제 발생!

프로필에서 유저명 업데이트 시 헤더에 적힌 유저명이 바로 업데이트가 되지 않는다.

프로필 유저명 업데이트는 updateProfile() 메서드를 통하여 userObj를 업데이트 하고 있다.
이는 firebase에 있는 유저 오브젝트를 업데이트 하는 것이다.
이에 반해 헤더의 네비게이션에 적힌 유저명은 prop으로 userObj(App.js에 만들어둔 state useObj) 즉 리액트를 리스닝하고 있다.

authService.currentUser.uid 이런식으로도 사용하면 되는데 왜 굳이 userObj를 prop으로 여기저기 공유하며 사용하냐면 소스를 하나로 통일하고 싶기 때문이다.
그렇게 하면 userObj의 정보 변화만으로도 전체에 영향을 줄수 있기 때문에 결론적으로 더 깔끔하게 코드를 작성할 수 있다.

userObj는 App.js에서 시작된다.
그다음 라우터로 보내져서 > home / profile / navigation에 적용된다.

여기서 잠깐 리액트의 특징을 생각해보자.
리액트는 새로운 정보를 적용하거나 상태의 변화가 있을 때 새 정보를 인식한 후 모든 요소를 리렌더링한다!
즉, userObj에 새로운 상태를 적용시키면 전체에 변화를 줄 수 있다.

그렇다면 user를 새로고침해주는 새로운 function을 만들어 보자.

📍 src > components > App.js

onAuthStateChanged(auth, async (user) => {
      if (user) {
        if (user.displayName === null) {
          await updateProfile(user, { displayName: "유저" });
        }
        //로그인한 사용자에 대한 user 오브젝트를 userObj 상태에 넣어 주자.
        setUserObj(user);
      } else {
        setUserObj(null);
      }
      //초기화
      setInit(true);
    });
  }, []);

  //🔥 user 새로고침하는 기능: firebase의 정보를 가지고 react.js의 userObj 업데이트 하기
  const refreshUser = async () => {
    const user = authService.currentUser;
    setUserObj(Object.assign({ ...user }));
  };


//
return(
  <>
    {init ? (
        <AppRouter
          isLoggedIn={Boolean(userObj)}
          userObj={userObj}
          refreshUser={refreshUser}
        />
      //

📍 src > components > Router.js

//
const AppRouter = ({ refreshUser, isLoggedIn, userObj }) => {
  //
  return (
    //
    <Route
      path="/profile"
      element={<Profile userObj={userObj} refreshUser={refreshUser} />}
      ></Route>
    //

📍 src > routes > Profile.js

//
const Profile = ({ refreshUser, userObj }) => {
  //
  
  const onSubmit = async (event) => {
    event.preventDefault();
    //1. firebase에 있는 profile 업데이트
    if (userObj.displayName !== newDisplayName) {
      await updateProfile(userObj, {
        displayName: newDisplayName,
      });
      //2. 그러고 나서 react.js에 있는 유저명도 새로고침되게 하기
      refreshUser();
    }
  };

아.. 오류 없이 잘되는줄 알았는데 웬걸..
유저명을 한 번 더 바꾸려고 하니 이런 오류가 계속 뜬다.

⚠️ Uncaught (in promise) TypeError: userInternal.getIdToken is not a function.

일단 다른 많은 분들이 시도한대로 onSubmit 펑션에서 updateProfile 대상을 authService.currentUser로 해서 해보니 코드가 아주 잘 돌아가는 것 처럼 보였다.

그런데 내 목적대로인 userObj를 갖다가 쓰지를 못하니 뭔가 아닌거 같아서 단계별로 콘솔을 찍어보니 아니나 다를까 첫 번째 변경 이후, 두 번째 유저명 변경 때 부터는 auth의 currentUser는 바로바로 잘 변경되지만 userObj는 한 박자 늦게 변경되는 것을 확인할 수 있었다.

이건 내가 원하는게 아니여.. ㅠㅠㅠㅠ 엏ㅇ엉엉
하던 도중 어떤 유저의 댓글을 보고 그냥 나도 이렇게 해야 겠다 싶어서 일단 요렇게 하고 넘어가기로 했다.

그냥 임의로 리렌더링 한번 더 시켜서 맞춰버리는 방법이다.

이렇게.

📍 src > components > App.js

  //오로지 refresh만을 위한 state
  const [, setNewName] = useState("");

  const refreshUser = async () => {
    setNewName(userObj.displayName);
  };

나중에 왜 userInternal.getIdToken is not a function 오류가 뜨는지나 알아봐야 겠다. 지금 내 지식으로는 한계에 넘나리 부딪히기 때문에 일단 넘어간다...후 ㅠㅠ...