[React] React + Firebase 연동 (query, update) (3)

Query로 원하는 데이터 가져오기

query문을 사용하면 원하는 조건의 데이터를 가져올 수 있는데, firebase에서는 query() 함수를 사용한다. 

이때, where() 함수를 사용하여 안에 조건을 작성해 주면 된다. 

 

userObj.uid 와 일치하는 정보를 갖고싶으면 다음과 같이 입력한다. 

const q = query(collection(dbService, "nweets"), where("creatorId", "==", userObj.uid));

필드명이 "creatorId" 이고 값이 userObj.uid와 일치하면 query에 반환한다.

 

query함수 안에 orderBy를 다음과 같이 작성하면 순서대로 반환하겠지만, firebase에서는 index를 추가하여야 하는데, 

const q = query(collection(dbService, "nweets"), where("creatorId", "==", userObj.uid), orderBy("createdAt"));

다음과 같이 에러가 뜨면서, 링크를 누르면 

위와 같이 색인을 추가할 수 있다. firebase에서는 이를 인덱스라고 하기도 한다.

 

Update Profile

프로필의 계정 이름을 변경하기 위해서, 해당 로그인되어있는 유저의 프로필 이름을 변경해야 한다.

getAuth().currentUser 정보 안에 displayName 이 값을 이용한다. 처음 설정하지 않을 때는 null 값을 반환하는데, 이때 "Anonymous"로 설정. 

 

// Navigation.js

if(userObj.displayName === null) {
    const name = "Anonymous";
    userObj.displayName = name;
};

 

Profile 페이지에서 update 할 input을 생성 후, submit 하면 user의 displayName이 변경된 값을 firebase에 적용시키는 updateProfile() 함수를 이용한다. 

 

React에서는 큰 object의 값을 변경시킬 때는 변경 여부를 확인하기 어려우므로, 작은 object로 변경하여 바꿔준다. 이때, 이 애플리케이션의 가장 root인 App.js에서 userObj를 변경해 줄 수 있는 refreshUser() 함수를 생성하여 Profile의 파라미터로 넘겨줘, update를 submit 할 때마다 refresh 해준다.

 

// App.js

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

// Profile.js

const onSubmit = async(event) => {
    event.preventDefault();
    const user = authService.currentUser;
    if(userObj.displayName !== newDisplayName) {
        await updateProfile(user, {
            displayName: newDisplayName,
        });
    }
    refreshUser();
};