react-native firebase 연동

react-native-firebase 라이브러리 연동

다음을 참고하여 일단 설치와 환경 설정을 완료하였다.

이제 데이터베이스를 사용할 수 있어야하는데 어떤 방식으로 사용해야할지를 더 알아보아야 한다.

• 소스코드

App.tsx 파일에 다음과 같이 위에 넣어주었더니 이런 결과가 나왔다.

import database from '@react-native-firebase/database';

  database()
  .ref('/users/123')
  .set({
    name: 'Ada Lovelace',
    age: 31,
  })
  .then(() => console.log('Data set.'));

이러한 방식으로 usercontext에서 사용해서 로그인 기능을 사용해야한다.

(https://firebase.google.com/docs/database/web/read-and-write?hl=ko)

기본 쓰기 작업

기본 쓰기 작업은 set() 코드를 사용하여 지정된 참조에 데이터를 저장하고 해당 경로의 기존 데이터를 모두 바꿉니다. 예를 들어 소셜 블로깅 애플리케이션은 다음과 같이 set()를 사용하여 사용자를 추가할 수 있습니다.

function writeUserData(userId, name, email, imageUrl) {
  firebase.database().ref('users/' + userId).set({
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}

• set()를 사용하면 지정된 위치에서 하위 노드를 포함한 데이터를 덮어씁니다.

데이터 읽기

• 값 이벤트 수신 대기

  경로의 데이터를 읽고 변경사항을 수신 대기하려면 firebase.database.Reference의 on() 또는 once() 메서드를 사용하여 이벤트를 관찰합니다.

이벤트	일반적인 용도

value	경로의 전체 내용을 읽고 변경사항을 수신 대기합니다.

value 이벤트를 사용하여 이벤트 발생 시점에 특정 경로에 있던 콘텐츠의 정적 스냅샷을 읽을 수 있습니다.

이 메서드는 리스너가 연결될 때 한 번 트리거된 후 하위 요소를 포함한 데이터가 변경될 때마다 다시 트리거됩니다.

하위 데이터를 포함하여 해당 위치의 모든 데이터를 포함하는 스냅샷이 이벤트 콜백에 전달됩니다.
데이터가 없는 경우 스냅샷은 exists() 호출 시 false를 반환하고 val() 호출 시 null을 반환합니다.

var starCountRef = firebase.database().ref('posts/' + postId + '/starCount');
starCountRef.on('value', (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);
});

리스너는 이벤트 발생 시점에 데이터베이스에서 지정된 위치에 있던 데이터를 포함하는 snapshot을 수신합니다. val() 메서드를 사용하여 snapshot의 데이터를 검색할 수 있습니다.

데이터 한 번 읽기

get() 을 사용하여 데이터 한 번 읽기

SDK는 앱이 온라인이든 오프라인이든 상관없이 데이터베이스 서버와의 상호작용을 관리하도록 설계되었습니다.

일반적으로 위에서 설명한 값 이벤트 기법을 사용하여 데이터를 읽어 백엔드에서 데이터에 대한 업데이트 알림을 수신해야 합니다. 리스너 기법은 사용량과 결제를 줄여주며 사용자가 온라인과 오프라인으로 진행할 때 최상의 환경을 제공하도록 최적화되어 있습니다.

데이터가 한 번만 필요한 경우 get()을 사용하여 데이터베이스에서 데이터의 스냅샷을 가져올 수 있습니다. 어떠한 이유로든 get()이 서버 값을 반환할 수 없는 경우 클라이언트는 로컬 스토리지 캐시를 프로브하고 값을 여전히 찾을 수 없으면 오류를 반환합니다.

불필요한 get() 사용은 대역폭 사용을 증가시키고 성능 저하를 유발할 수 있지만 위와 같이 실시간 리스너를 사용하면 이를 방지할 수 있습니다.

const dbRef = firebase.database().ref();
dbRef.child("users").child(userId).get().then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});

• 관찰자를 사용하여 데이터 한 번 읽기

경우에 따라 서버의 업데이트된 값을 확인하는 대신 로컬 캐시의 값을 즉시 반환하고 싶을 수 있습니다. 이 경우에는 once()를 사용하여 로컬 디스크 캐시에서 데이터를 즉시 가져올 수 있습니다.

이 방법은 한 번 로드된 후 자주 변경되지 않거나 능동적으로 수신 대기할 필요가 없는 데이터에 유용합니다. 예를 들어 위 예시의 블로깅 앱에서는 사용자가 새 글을 작성하기 시작할 때 이 메서드로 사용자의 프로필을 로드합니다.

var userId = firebase.auth().currentUser.uid;
return firebase.database().ref('/users/' + userId).once('value').then((snapshot) => {
  var username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  // ...
  });

데이터 업데이트 또는 삭제

• 특정 필드 업데이트

  다른 하위 노드를 덮어쓰지 않고 특정 하위 노드에 동시에 쓰려면 update() 메서드를 사용합니다.

  update()를 호출할 때 키 경로를 지정하여 더 낮은 수준의 하위 항목 값을 업데이트할 수 있습니다. 확장성 개선을 위해 데이터를 여러 위치에 저장한 경우 데이터 팬아웃을 사용하여 해당 데이터의 모든 인스턴스를 업데이트할 수 있습니다.

  예를 들어 소셜 블로깅 애플리케이션에서 다음과 같은 코드를 사용하여 글을 만든 후 최근 활동 피드 및 게시자의 활동 피드에 동시에 업데이트할 수 있습니다.

function writeNewPost(uid, username, picture, title, body) {
  // A post entry.
  var postData = {
    author: username,
    uid: uid,
    body: body,
    title: title,
    starCount: 0,
    authorPic: picture
  };

  // Get a key for a new Post.
  var newPostKey = firebase.database().ref().child('posts').push().key;

  // Write the new post's data simultaneously in the posts list and the user's post list.
  var updates = {};
  updates['/posts/' + newPostKey] = postData;
  updates['/user-posts/' + uid + '/' + newPostKey] = postData;

  return firebase.database().ref().update(updates);
}

  

이 예시에서는 push()를 사용하여 모든 사용자의 게시물을 포함하는 노드(/posts/$postid)에서 게시물을 작성하는 동시에 키를 검색합니다.

그런 다음 이 키를 사용하여 /user-posts/$userid/$postid에서 사용자의 게시물에 두 번째 항목을 작성합니다.

이 경로를 사용하면 이 예시에서 두 위치에 새 게시물을 생성한 것처럼 update()를 한 번만 호출하여 JSON 트리의 여러 위치에서 동시에 업데이트를 수행할 수 있습니다. 이러한 동시 업데이트는 원자적인 성격을 갖습니다. 즉, 모든 업데이트가 한꺼번에 성공하거나 실패합니다.

• 완료 콜백 추가

데이터가 커밋되는 시점을 파악하려면 완료 콜백을 추가합니다.
set() 및 update()는 모두 쓰기가 데이터베이스에 커밋되었을 때 호출되는 선택적 완료 콜백을 사용합니다. 호출이 실패하면 콜백에 실패 이유를 나타내는 오류 객체가 전달됩니다.

firebase.database().ref('users/' + userId).set({
  username: name,
  email: email,
  profile_picture : imageUrl
}, (error) => {
  if (error) {
    // The write failed...
  } else {
    // Data saved successfully!
  }
});

• 데이터 삭제

데이터를 삭제하는 가장 간단한 방법은 해당 데이터 위치의 참조에 remove()를 호출하는 것입니다.

set() 또는 update() 등의 다른 쓰기 작업 값으로 null을 지정하여 삭제할 수도 있습니다.

update()에 이 방법을 사용하면 API 호출 한 번으로 여러 하위 항목을 삭제할 수 있습니다.

회원가입 기능 만들기

const saveUserInfo = () => {
    const key = Math.random().toString().replace('.', '');

    database()
      .ref('users/' + key)
      .set({
        name: {name},
        tel: {tel},
        email: {email},
      });
  };

다음과 같이 일단 만들어 주었다.

데이터 베이스에 정보가 저장된 것을 확인할 수 있다.

이제 로그인 기능을 구현해보자.

key를 사용해서 구분하려니, 데이터를 가져올 때 파라미터 값이 적절치 않아지는 듯하여 userId를 추가하였다.

• 참고: firebase authentication 사용법

(https://stickode.com/detail.html?no=1999)

(https://wikidocs.net/21595)

데이터 다루기

Firebase Authentication

(https://www.pradipdebnath.com/2020/10/04/how-to-implement-email-authentication-in-react-native-using-firebase/)

(https://stackoverflow.com/questions/54330735/how-to-link-firebases-authentication-to-realtime-database)