헤더 네비게이션의 프로필에 유저 이름 추가하기

유저 프로필 업데이트하고 다른 컴포넌트 갱신하고 싶을 수도 있으니 그때 편하라고 네비게이션에도 userObj를 보내서 유저 정보를 화면에 표시해 보자!

1. Navigation 컴포넌트에 prop으로 userObj 보내기

📍 src/components/Router.js

const AppRouter = ({ isLoggedIn, userObj }) => {
  return (
    <Router>
      {isLoggedIn && <Navigation userObj={userObj} />}
      <Routes>

2. userObj를 prop으로 받아서 displayName 사용

📍 src/components/Navigation.js

import { Link } from "react-router-dom";

const Navigation = ({ userObj }) => (
  <nav>
    <ul>
      <li>
        <Link to="/">홈</Link>
      </li>
      <li>
        <Link to="/profile">{userObj.displayName}의 프로필</Link>
      </li>
    </ul>
  </nav>
);

export default Navigation;

이런식으로 유저의 최신 데이터를 활용할 수 있다.

프로필 수정하기

1. 수정하는 form 만들기

📍 src/routes/Profiles.js

<form onSubmit={onSubmit}>
  <input
    onChange={onChange}
    type="text"
    placeholder="이름"
    value={newDisplayName}
    />
  <input type="submit" value="저장" />
</form>

2. updateProfile() 메서드로 사용자 프로필 업데이트하기

사용자의 표시 이름displayName 및 프로필 사진 URLphotoURL 등의 기본 프로필 정보를 업데이트할 때는 updateProfile() 메서드를 사용하면 된다.

• updateProfile
  updateProfile ( profile : { displayName ?: string | null ; photoURL ?: string | null } ) : Promise < void >
• 예시

import { getAuth, updateProfile } from "firebase/auth";
const auth = getAuth();
updateProfile(auth.currentUser, {
  displayName: "Jane Q. User", photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
  // Profile updated!
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});

참고 문서

보다시피 updateProfile()은 사용자의 displayName과 photoURL을 업데이트해주는 메서드이다. 보다 많은 기능을 사용하려면 다른 메서드를 참고하면 된다.

const [newDisplayName, setNewDisplayName] = useState(userObj.displayName);

  const onChange = (event) => {
    const {
      target: { value },
    } = event;
    setNewDisplayName(value);
  };

  const onSubmit = async (event) => {
    event.preventDefault();
    //이름 수정하면 updateProfile() 메서드 사용해 프로필 업데이트하기
    if (userObj.displayName !== newDisplayName) {
      //console.log(userObj.updateProfile);
      await updateProfile(userObj, { displayName: newDisplayName });
    }
  };

updateProfile()메서드를 사용하는 방법 말고 다른 방법을 사용하여 사용자의 displayName을 변경할 수도 있다. firestore에서 users 콜렉션 만고 도큐먼트 생성해서 유저에 관한 데이터 모두 관리하는 방법이다.

어쨋든 firebase.User의 메서드를 활용하여 프로필의 사용자 표시명을 바꾸는 작업을 수행해 보았다.
updateProfile()메서드는 사용자 표시명과, 프로필 사진 두가지를 업데이트 할 수 있는 메서드이기 때문에, 프로필 사진 업로드 기능과 수정하는 기능을 추가해 보자!
1. 프로필 사진 업로드 하는 폼 만들기
2. profilePhoto 버켓 만들어서
3. 다운로드 url 가져와서 위에 photoURL에 넣어주면 됨