파이어베이스에서 데이터를 가져온 후 데이터를 뿌려보자

-참고한 로직

참고한 로직

• getDocs로 파이어 스토어에 올린 Data를 가져와서 메인 홈페이지에 뿌려준다.

작성한 로직

export default function Home() {
const [snacks, setSnacks] = useState([]);
const snckcollectionRef = collection(db, "product");

useEffect(() => {
const getData = async () => {
const data = await getDocs(snckcollectionRef);

setSnacks(
        data.docs.map((doc) => ({
          id: doc.id,
          name: doc.data().name,
          price: doc.data().price,
          image: doc.data().image,
        }))
      );
    };
    getData();
  }, []);

• 파이어스토어에서 가져온 get 해온 데이터를 담아줄 state를 만들어 주었다!
• snckcollectionRef 변수안에 파이어스토어에 있는 product 라는 컬렉션의 data 담아줌
• 화면이 처음 랜더링 하였을때 Data를 가져오기 위해서 useEffetc를 사용했다.
• snckcollectionRef 안에 담아두었던 데이터를 getDocs라는 파이어베이스 내장함수를 이용하여 data라는 상수에 지정해 주었다.
• setSnacks함수를 이용하여 가져온 데이터를 맵을 돌려서 id,name,price,image 값을 받아와 snacks에 저장해 주었다.
• data.docs.map((doc) →data를 console.log를 찍었을 때 docs안에 배열로 담겨져 있어서 map 함수를 사용하여서 받아왔다.
• name: doc.data().name → data() 데이터를 가져오는 내장함수
• getData() 함수를 실행시켜 데이터를 가져온다!