리액트 기초/Firebase
React & Firebase 연동하기/데이터 가져오기
덕구공
2021. 8. 22. 22:32
Firebase / Firestore 설정
- 위 링크에 들어가서 Firebase / Firestore를 설정한 후에 Firestore에 원하는 데이터를 추가하자.
- 나는 Firebase 프로젝트의 이름을 duckgugong-react, collection의 이름을 bucket, document의 이름을 bucket_item으로 만들고 field를 completed, text로 만들었다.
React에 Firebase 연동하기
- Firebase를 연동할 리액트 프로젝트를 열고 아래 명령어를 입력하자.
yarn add firebase- config를 가져오기 위해 src 폴더 하위에 firebase.js 파일을 만들고 아래 코드를 붙여넣자.
firebase.js
//firebase.js
import firebase from "firebase/compat/app"
import 'firebase/compat/firestore';
const firebaseConfig = {
// firebase 설정과 관련된 개인 정보
};
// firebaseConfig 정보로 firebase 시작
firebase.initializeApp(firebaseConfig);
// firebase의 firestore 인스턴스를 변수에 저장
const firestore = firebase.firestore();
// 필요한 곳에서 사용할 수 있도록 내보내기
export { firestore };- Firebase 프로젝트를 열고 </> 모양의 웹 버튼을 클릭하자.
- 앱 닉네임을 적어주고 앱 등록 클릭.
- 앱 닉네임은 내 앱을 어떻게 부를지 정하는 것이다.
- 잠시 기다리면 Firebase SDK 추가영역에 텍스트가 나타난다.
- 아래 firebaseConfig의 내용을 위 firebase.js 파일의 firebaseConfig 변수에 복사
- firebase.js 파일이 아래처럼 되도록 하면 된다.
firebase.js
//firebase.js
import firebase from "firebase/compat/app"
import 'firebase/compat/firestore';
const firebaseConfig = {
// firebase 설정과 관련된 개인 정보
apiKey: "AIzaSyBB-NZ_Hd-Y8LCgdeJZdiUzqstqSU_6W78",
authDomain: "duckgugong-react.firebaseapp.com",
projectId: "duckgugong-react",
storageBucket: "duckgugong-react.appspot.com",
messagingSenderId: "455138718008",
appId: "1:455138718008:web:0e234daddc7a1cf4ac91cd",
measurementId: "G-3DSJ5X279T"
};
// firebaseConfig 정보로 firebase 시작
firebase.initializeApp(firebaseConfig);
// firebase의 firestore 인스턴스를 변수에 저장
const firestore = firebase.firestore();
// 필요한 곳에서 사용할 수 있도록 내보내기
// 다른 곳에서 불러올때 firestore로 불러와야 함!!
export { firestore };- App.js에서 firebase.js에서 내보낸 firestore를 임포트하자.
import { firestore } from "./firebase";- firestore가 잘 연동되었는지 확인해보기 위해 컴포넌트가 useEffect 훅 안에 firestore를 콘솔에 찍어보자
import './App.css';
import { firestore } from './firebase';
import { useEffect } from 'react';
function App() {
useEffect(() => {
console.log(firestore);
});
return (
<div className="App">
firebase 확인해보기!
</div>
);
}
export default App;- 키 밸류 값이 잘 넘어온 것을 알 수 있다.
- projectId에 내가 설정한 프로젝트 이름이 잘 넘어와있다.
Firestore에서 데이터 가져와보기
- firestore에 아래처럼 데이터가 들어있다고 가정하자.
- collection: bucket
- document: bucket_item
.collection()
- firestore와 React 프로젝트가 연동이 잘 되었으면 아래처럼 변수로 firestore의 collection에 접근해보자.
// bucket이라는 변수로 firestore의 collection인 bucket에 접근!
const bucket = firestore.collection("bucket");[collection].doc([document]).get().then() (document 하나 가지고오기)
- 위처럼 collection에 접근한 후 해당 collection의 document에 접근하고 싶으면 아래처럼 하면된다.
doc()안에 document의 이름을 넣고 get()을 사용해서 비동기 작업으로 데이터를 가져오자.- 외부랑 통신을 할 때,
동기로 처리하면 데이터를 가져올 때까지 다른 일을 하지 못하므로 비동기 작업을 해서 일단 get()으로 요청을 한 후에 다른 작업을 시켜놓고 요청에 대한 답이 들어올 때 처리할 일을 then() 안에 적어주자.
// collection의 document인 "bucket_item"을 가져온다.
bucket.doc("bucket_item").get().then(
// 비동기 작업이 끝나고 할 일.
);[document].data() / [document].id
- 비동기 작업이 끝나면
then 안의 콜백함수의 파라미터로 doc()의 파라미터로 써준 document가 들어갈 것이다. 해당 파라미터에 .data()를 붙이면 데이터를 가져오고, .id를 붙이면 document의 id를 가져온다.
bucket.doc("bucket_item").get().then((doc) => {
// document의 데이터를 가져옴
console.log(doc.data());
// document의 id를 가져옴
console.log(doc.id);
});- 아래처럼 useEffect 훅 안에서 firestore의 collection에 접근한 후 document의 데이터와 id를 콘솔창에 찍어보자.
import './App.css';
import { firestore } from './firebase';
import { useEffect } from 'react';
function App() {
useEffect(() => {
// bucket이라는 변수로 firestore의 collection인 bucket에 접근
const bucket = firestore.collection("bucket");
// collection의 document인 "bucket_item"을 가져온다.
bucket.doc("bucket_item").get().then((doc) => {
// document의 데이터를 가져옴
console.log(doc.data());
// document의 id를 가져옴
console.log(doc.id);
});
});
return (
<div className="App">
firebase 확인해보기!
</div>
);
}
export default App;- document의 데이터와 id가 잘 출력된 모습을 볼 수 있다.
[document].exists
- document가 존재하면 true, 아니면 false를 반환한다.
- 아래처럼 .doc([document]).get().then()으로 document에 접근 한 후 then() 안의 콜백함수에서 조건문을 사용해서 docuemnt가 존재하는지 아닌지 판별할 수 있다.
bucket.doc("bucket_item").get().then((doc) => {
// "bucket_item" document가 존재하면 아래 작업 수행
if (doc.exists) {
// document의 데이터를 가져옴
console.log(doc.data());
// document의 id를 가져옴
console.log(doc.id);
}
});
});[collection].get().then() (document 전체 가지고 오기)
- 만약 collection의 docuement를 모두 가져오고 싶으면 아래처럼 사용하면 된다.
// collection의 document인 "bucket_item"을 가져온다.
bucket.get().then(
// 비동기 작업이 끝나고 할 일.
);- then안의 콜백함수의 파라미터에 모든 document가 들어있으므로 아래처럼 반복문을 돌려서 document 하나하나의 데이터를 확인할 수 있다!
import './App.css';
import { firestore } from './firebase';
import { useEffect } from 'react';
function App() {
useEffect(() => {
// bucket이라는 변수로 firestore의 collection인 bucket에 접근
const bucket = firestore.collection("bucket");
// 모든 document 가져오기
bucket.get().then((docs) => {
// 반복문으로 docuemnt 하나씩 확인
docs.forEach((doc) => {
if(doc.exists){
// document의 데이터
console.log(doc.data());
// document의 id
console.log(doc.id);
}
});
});
});
return (
<div className="App">
firebase 확인해보기!
</div>
);
}
export default App;