# Profile

Doozuu·2023년 1월 13일
0

Firebase

목록 보기
6/6

사용자 이름 프로필에 보여주기

⭐️ user.displayName

userObj를 props로 받아와서 displayName을 이용해주면 된다.

  • 여기서 발생하는 문제점 : 소셜 로그인을 하면 이름이 보이는데, 이메일 로그인을 하면 이름이 null이라 안보이므로 이름이 null일 때는 그냥 "profile"로 보이도록 설정해준다.
  <Link to="/profile">{userObj.displayName ?? "profile"}</Link>



사용자 이름 수정하기

⭐️ user.updateProfile

  1. displayName : 이름을 업데이트 할 수 있다.
  2. photoURL : 사진을 업데이트 할 수 있다.

프로필 이름이나 사진 등을 바꿀 수 있게 하기 위해 updateProfile을 이용한다.

  • 이때 새로고침을 하지 않으면 업데이트가 바로 반영되지 않는 문제가 발생한다. 업데이트를 하면 변화가 바로 반영되도록 하기 위해 firebase의 정보를 가지고 react.js를 업데이트 해주어야 한다.

⭐️ updateCurrentUser

현재 사용자 정보를 바로바로 업데이트 할 수 있게 해줌.

App.js

import { updateCurrentUser } from "firebase/auth";

 const refreshUser = async () => {
    await updateCurrentUser(authService, authService.currentUser);
    setUserObj(authService.currentUser);
  };

Profile.js

const onSubmit = async (event) => {
    event.preventDefault();
    if (newDisplayName !== userObj.displayName) {
      await updateProfile(userObj, { displayName: newDisplayName });
      refreshUser();
    }
  };
profile
모든게 새롭고 재밌는 프론트엔드 새싹

0개의 댓글