21.10.23 ๊ณต๋ถ๊ธฐ๋ก๐งโ๐ป
FireBase, React๋ฅผ ํ์ฉํ ํธ์ํฐ ํด๋ก ์ฝ๋ฉ๐งโ๐ป
์ค๋ ์๋ฃํ ๋ชฉ๋ก
1. ํธ์ ์์ฑ ๋ฐ ํธ์ ๋ชฉ๋ก์ถ๋ ฅ
2. ์ ๊ณต ์์
ํํ ๊ณผ์ ..ing
const [nweet, setNweet] = useState("");
const [nweets, setNweets] = useState([]); // ํธ์๋ค์ ์ํ๋ก ๋ฐ์์ ๋ณด๊ดํด์ผํ๊ธฐ ๋๋ฌธ์ ๋ฐฐ์ด๋ก usestate ์์ฑ
const getNweets = async ()=> {
const q = query(collection(dbService,"nweets"));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
const nweetObj = { //nweetObj => ํธ์ ๋ด์ฉ
...doc.data(),
id:doc.id,
}
setNweets(prev => [nweetObj,...prev]);
});
ํธ์ ๋ฐ์ดํฐ๋ค์ ํ๋ฉด์ ๋ํ๋ด๊ธฐ ์ํด์๋ ์ํ๋ก ๊ด๋ฆฌํด์ผํ๋ค.
๊ทธ๋ ๊ธฐ ๋๋ฌธ์ useState()์ ์ด์ฉํ์ฌ ํธ์ ๋ฐ์ดํฐ๋ค์ ๋ฐฐ์ด๋ก ๋ฐ์ ์ ์ฅํ๋ค.
ํ์ด์ด๋ฒ ์ด์ค์ ์ ์ฅ๋ ํธ์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค๊ธฐ ์ํด์ querySnapshot์ ์ด์ฉํ๋๋ฐ, ์ฌ๊ธฐ ์์ ์๋ index์ค doc๊ฐ ํธ์ ๋ฐ์ดํฐ์ด๊ธฐ ๋๋ฌธ์ doc๋ก ๋ฐ์์๋ค.
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
const nweetObj = { //nweetObj => ํธ์ ๋ด์ฉ
...doc.data(),
id:doc.id,
}
์ฌ๊ธฐ์ doc(ํธ์๊ฐฏ์)๊ฐ ๋ง์ฝ 5๊ฐ๋ฉด forEachํจ์๋ 5๋ฒ์ด ์ํ๊ฐ ๋๋ค.
์ด๋ ์ฐ๋ฆฌ๊ฐ ์์์ ํธ์๋ฐ์ดํฐ๋ฅผ ์ํ๋ก ๋ณด๊ดํ๊ธฐ ์ํด ๋ง๋ nweets์ ๋ฐ์ดํฐ๋ฅผ ์๊ธฐ ์ํด์ ์ํ ์ด์ ์ nweets์ ์ํ์ค์ธ ๋ฐ์ดํฐ๋ฅผ[nweetObj,...prev]์ฒ๋ผ ํฉ์ณค๋ค.
setNweets(prev => [nweetObj,...prev]);
});
๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์ํ ์ด์ ์ nweets๋ setNweet์ ์ธ์๋ก ์ ๋ฌ๋ ํจ์์ ์ฒซ๋ฒ์งธ ์ธ์๋ก ๋์ด์ค๊ฒ ๋์ nweetobj(ํธ์ ๋ฐ์ดํฐ)์๋ ์ต์ ํธ์์ด 0๋ฒ์งธ ๋ฐฐ์ด๋ก ์์นํ๊ณ ์ด์ ์ ์จ ํธ์์ 1๋ฒ์งธ ๋ฐฐ์ด์ ์์นํ๊ฒ ๋๋ค.
const nweetObj = { //nweetObj => ํธ์ ๋ด์ฉ
...doc.data(),
id:doc.id,
}
๋ํ nweetObj์ด๋ผ๋ ๋ณ์๋ฅผ ๋ง๋ค์ด querySnapshot์์ ๋ถ๋ฌ์จ ๋ฐ์ดํฐ๋ฅผ ๋ณด๊ดํ๋๋ฐ ...์ด doc.data()์์ ๋ถ์ ์ด์ ๋ ES6 ์ ๊ฐ๊ตฌ๋ฌธ์ ์ด์ฉํ๋ค.
์ ๊ฐ๊ตฌ๋ฌธ์ด๋?
์ ๊ฐ๊ตฌ๋ฌธ์ด ์์ง ์ต์ํ์ง ์์ ์์ ๋ฅผ ์ฐพ์๋ณด์๋๋ฐ
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
// expected output: 6
console.log(sum.apply(null, numbers));
// expected output: 6
์ฝ๊ฒ ์ ์ํ์๋ฉด ๋ฐฐ์ด์ด๋ ๊ฐ์ฒด๋ฅผ ํผ์ณ์ฃผ๋ ๊ฒ์ด๋ค.
๋ง์ฝ ํผ์น ๋์์ด ๊ฐ์ฒด์ธ ๊ฒฝ์ฐ
const myObject1 = {
laptop: 'MacBook Pro',
tablet: 'iPad Pro 11'
}
const myObject2 = {...myObject1};
console.log(myObject1); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}
console.log(myObject2); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}
console.log(myObject1 === myObject2); // false
{...myObject1}๋ฅผ ๋ณด๋ฉด ์ ๊ฐ๊ตฌ๋ฌธ์ ์ฌ์ฉํ ๊ฒ์ ์ ์ ์๋ค.
ํผ์น ๋์์ด ๋ฐฐ์ด์ธ ๊ฒฝ์ฐ
const myArray1 = ['Canna', 'Cuzz', 'Faker', 'Teddy', 'Effort'];
const myArray2 = [...myArray1];
console.log(myArray1); // ["Canna", "Cuzz", "Faker", "Teddy", "Effort"]
console.log(myArray2); // ["Canna", "Cuzz", "Faker", "Teddy", "Effort"]
console.log(myArray1 === myArray2); // false
๋ฐฐ์ด์ ํผ์ณ ์๋ก์ด ๋ฐฐ์ด์ ๋ง๋ค ์ ์๋ค๋ ๊ฒ์ ์ ์ ์๋ค.
์ถ์ฒ : https://bigtop.tistory.com/62 (BigTop_Log๋)
๋ค์ ๋ณธ๋ก ์ผ๋ก ๋์์์
<div>
{nweets.map((nweet) => (
// map ํจ์๋ฅผ ์ด์ฉํ์ฌ nweets ๋ฐฐ์ด์ ์ํํ๋ฉด์ jsx๋ฅผ ๋ฐํํ๊ฒ ๋ง๋ค์ด์ ํธ์ ๋ฐฐ์ด๋ค์ ์น์ ๋ํ๋.
<div key={nweet.id}>
<h4>{nweet.nweet}</h4>
</div>
))}
</div>
์ ์ฝ๋๋ฅผ ์ด์ฉํ์ฌ ํธ์๋ชฉ๋ก๋ค์ ํ๋ฉด์ ์ถ๋ ฅ์์ผ์คฌ๋ค.
๊ฒฐ๊ณผ ํ๋ฉด
์ฐธ๊ณ
ํ์ด์ด๋ฒ ์ด์ค querySnapshot ์ฌ์ฉ๋ฒ(https://firebase.google.com/docs/reference/node/firebase.firestore.QuerySnapshot)
์ ์ฒด ์ฝ๋
import { dbService } from 'fbase';
import React,{useState, useEffect} from "react";
import {addDoc, collection,getDocs,query} from "firebase/firestore";
const Home = () => {
const [nweet, setNweet] = useState("");
const [nweets, setNweets] = useState([]); // ํธ์๋ค์ ์ํ๋ก ๋ฐ์์ ๋ณด๊ดํด์ผํ๊ธฐ ๋๋ฌธ์ ๋ฐฐ์ด๋ก usestate ์์ฑ
const getNweets = async ()=> {
const q = query(collection(dbService,"nweets"));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
const nweetObj = { //nweetObj => ํธ์ ๋ด์ฉ
...doc.data(), // ES6 spread attribute ๊ธฐ๋ฅ(์ ๊ฐ๊ตฌ๋ฌธ)
id:doc.id,
} // ์ค์!!) querySnapShot์ ์๋ doc(ํธ์ ๊ฐฏ์)๊ฐ 5๊ฐ๋ฉด forEachํจ์๋ 5๋ฒ ์ํ๊ฐ ๋จ.
// ์ด๋ nweets์ ํธ์ ๋ฐ์ดํฐ๋ฅผ ์๊ณ ์ถ์ผ๋ฉด ์ํ ์ด์ ์ nweets์ ์ํ์ค์ธ ๋ฐ์ดํฐ๋ฅผ [nweetObj,...prev]์ฒ๋ผ ํฉ์นจ.
setNweets(prev => [nweetObj,...prev]);
// ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์ํ ์ด์ ์ nweets๋ setNweet์ ์ธ์๋ก ์ ๋ฌ๋ ํจ์์ ์ฒซ๋ฒ์งธ ์ธ์๋ก ๋์ด์ค๊ฒ๋จ.
// ์ฆ nweetobj์๋ ์ต์ ํธ์์ด 0๋ฒ์งธ ๋ฐฐ์ด๋ก ์์นํ๊ณ ์ด์ ์ ์จ ํธ์์ 1๋ฒ์งธ ๋ฐฐ์ด์ ์์นํ๊ฒ ๋จ.
});
};
useEffect(() => {
getNweets();
}, [])
const onSubmit = async (e) => {
try{
e.preventDefault();
const docRef = await addDoc(collection(dbService, "nweets"),
{
nweet,
createdAt: Date.now(),
}); // ๋ฐ์ดํฐ๋ฒ ์ด์ค ์์ฑ
console.log("Document Written with Id:", docRef.id);
}catch(error){
console.log("Error adding document", error)
}
setNweet("");
};
const onChange = (event) =>{
const {target : {value},
}= event;
setNweet(value);
};
console.log(nweets);
return (
<>
<div>
<form onSubmit={onSubmit}>
<input value={nweet} onChange={onChange} type = "text" placeholder ="what's on your mind" maxLength={120} />
<input type="submit" value="nweet"/>
</form>
<div>
{nweets.map((nweet) => (
// map ํจ์๋ฅผ ์ด์ฉํ์ฌ nweets ๋ฐฐ์ด์ ์ํํ๋ฉด์ jsx๋ฅผ ๋ฐํํ๊ฒ ๋ง๋ค์ด์ ํธ์ ๋ฐฐ์ด๋ค์ ์น์ ๋ํ๋.
<div key={nweet.id}>
<h4>{nweet.nweet}</h4>
</div>
))}
</div>
</div>
</>
);
};
export default Home;
์ด๋ฒ ์ฃผ๋ ํ๊ต ์ ๊ณต์์ ํ ํ๋ก์ ํธ ๋๋ถ์ ๊ฐ์ธ ์น ๊ณต๋ถ๋ฅผ ๋ง์ด ๋ชปํ๋ค.. ๋ด์ผ์ ์ฃผ๋ง์ด๋๊น ๊ฐ์ธ ์ค๊ฐ ๋ณด๊ณ ์ ๊ณผ์ ๋ฅผ ์ผ๋ฅธ ๋๋ด๊ณ ๋ฆฌ์กํธ ๊ณต๋ถ๋ฅผ ํด์ผ๊ฒ ๋ค..
์ฒ์์ผ๋ก ํ ์ํ๋ก์ฐ๋ฅผ ๊ฑด๋ค์ฌ๋ณด๋ ์ ๋ง ์ด๋ ต๊ณ ์ด์ง๋ฌ์ด ํ๋ฌธ์ด๋ผ๋ ๊ฒ์ ์๊ฒ ๋๋ค.. ๋๋ ๋จธ์ ๋ฌ๋์ชฝ์ด๋์ ์์ ํ ์ ๋ง๋๋ค๋ ๊ฒ์ ์ด๋ฒ ํ๊ธฐ๋์ ๋ด๋ด ๋๋ผ๊ณ ์๋ค..๐ต
๋ฆฌ์กํธ๋ฅผ ๊ณต๋ถํ๋ฉด์ ES6 ๋ฌธ๋ฒ์ ์กฐ๊ธ ๋ ์ตํ๊ณ ๊ณต๋ถํ์ผ๋ฉด ๋ ์ข์์ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ๋ค์๋ค.. ๊ณต๋ถํ ๊ฒ ์ฐ๋๋ฏธ์ธ๋ฐ ํฐ์ผ์ด๋ค ใ ใ ,,
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(21.10.23 ๊ณต๋ถ๊ธฐ๋ก๐งโ๐ป), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@dduck/21.10.23-๊ณต๋ถ๊ธฐ๋ก์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค