firebase 데이터 정보를 객체에 담기
1. 첫번째 시도
state에 빈 객체를 넣어두고, setState함수를 이용해 객체에 데이터를 담으려고 했다.
this.state = {
pre_number: 0,
main_number: 0,
field_list: {}
};요로코롬.. 빈 객체를 선언해준 다음!
componentDidMount() {
const docRef = db.collection("left_seat").doc("wecoder_6");
docRef
.get()
.then(function(doc) {
if (doc.exists) {
this.setState({
field_list: doc.data()
});
} else {
console.log("No such document!");
}
})
.catch(function(err) {
console.log("Error getting document", err);
});
}컴디마 안에서 left_seat 콜렉션에 담긴 데이터들을 소환한 다음
setState를 이용해 빈 객체에 데이터를 담아주려고 하는데…
return 전에 field_list를 콘솔 찍어보니…
뚜둔~~ 에러 발생!
구글링 시작!
arrow function을 쓰라고 한다… ㅋ
this 정리 빨리 끝내야겠네 휴~~
2. 두번째 시도 : Arrow function 쓰기
const docRef = db.collection("left_seat").doc("wecoder_6");
docRef
.get()
.then(doc => { // 여기가 달라진 부분쓰
if (doc.exists) {
// console.log("Document data: ", doc.data());
this.setState({
field_list: doc.data()
});
} else {
console.log("No such document!");
}
})
.catch(function(err) {
console.log("Error getting document", err);
});then 이후에 원래는 function이었던 것을 화살표함수로 바꿔주었다.
Stackoverflow 에 있는 답변을 읽어보니.. (나와 비슷한 상황의 질문글)
내가 쓴건 일반함수이기 때문에 this가 호출되는 대상에 묶여 있고,
클래스형 컴포넌트 안에서 코드가 자동적으로 strict mode에서 돌아가기 때문에
this가 undefined인거고 그래서 에러가 발생한거라고 한다.
앗 그럼 함수형에선 괜찮을지.. 나중에 훅스로 한번 도전고고!
여튼 띄우기 성공!
적용하기
원래의 화면쓰..!
투명 input창을 만들고 거기다가 입력한 값을 받아다가 저장버튼을 누르면
아예 placeholder에 숫자가 저장이 되도록 만들었는데
placeholder에 state에 있는 값 말고 firebase에 있는 데이터를 불러왔다.
이건 내가 입력한 값이 절대 아니다. firebase에 내가 설정한 데이터를 받아온거다!
와.. 그럼 handleChange값을 안 받아도 되는거니까 진짜 핵 간단한거네..?? 와우!!!
앞으로 코드가 훨씬 짧아질 것 같은 느낌적인 느낌이 든다 ㅋㅋㅋ
훅스 적용하기(hooks with firebase)
클래스형과 마찬가지로 db객체를 import 해온다.
useEffect와 useState 둘 다 쓸 것이므로 이것 또한 import 하기!
import React, { useEffect, useState } from "react";
import { db } from "../../firebase";그 다음엔 함수형 컴포넌트 안에 코드를 친다!!
훅스를 아직 마스터 한 게 아니라..
이 분 블로그를 많이 참고함!
// 생략.. 함수형 컴포넌트 껍데기겠죠? 훗
const [infoArr, setInfo] = useState([]); // update
const currentNumber = 6;
useEffect(() => {
console.log("effect");
const unsub = db.collection("left_seat").onSnapshot(snapshot => {
const allInfo = snapshot.docs.map(
doc =>
// id: doc.id,
doc.data()[currentNumber]
);
setInfo(allInfo.filter(v => v));
});
return () => {
console.log("cleanUp");
unsub();
};
}, []);
return (
<>
// div 구조 생략쓰
{infoArr.map(el => (
<Layout
left={el.pre_left} />
// 중략...... div 구조 생략쓰
</>
// 생략쓰코드는 이러하고.. 나의 firestore 구조는 이렇게..!
field 추가할 때 map을 선택하면 요렇게 객체 구조로 만들 수 있다. 구조가 잘못 되서 갈아 엎기를 반복하다가 나름 적당한 구조를 선택했다!
여튼 훅스로 이렇게 firestore 적용도 완료!! 소소한 코드지만 홈페이지에 보여지는 부분 중 하나가 나의 손을 거치게 된다는 게 넘 뿌듯할 따름이다.
+ 더불어…
위의 포스팅은 어떠한 기관과 관련된 게 절대 아닙니다! 값도, 이름도 제가 막 설정한 임의의 값입니다!