230907 개발일지 TIL - React와 Firebase,Swiper를 사용하여 리스트 만드는 법

React와 Firebase,Swiper를 사용하여 리스트 만드는 법

Firestore에서 데이터를 가져오는 함수를 설정한다. 이 함수는 useEffect 훅 내부에서 호출되며, 모든 사용자 정보를 가져와서 상태 변수인 usersData에 저장한다.

import React, { useEffect, useState } from 'react';
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
// import { B } from './BestCreator.styles'; // Not used in the given code
// import BestBanner from '../../../assets/images/customer/home/banner/best/best-banner-1.svg'; // Not used in the given code
import { db } from './../../../firebase/firebaseConfig'; 
import { collection, getDocs } from "firebase/firestore";

const BestCreator = () => {
  const [usersData,setUsersData] = useState([]);

  useEffect(() => {
    const usersCollectionRef = collection(db,'users');
    getDocs(usersCollectionRef)
      .then((querySnapshot) => {
        let usersArray = [];
        querySnapshot.forEach((doc) => {
          usersArray.push(doc.data());
        });
        setUsersData(usersArray);
      })
      .catch((error) => {
        console.log('Error getting documents: ', error);
      });
  }, []);

  console.log(usersData);

  return (
    <>
      <h1>인기 크리에이터 BEST</h1>

      <Swiper
        modules={[Navigation,Pagination,Scrollbar,A11y]}
        spaceBetween={20}
        slidesPerView={2.2}
        onSwiper={(swiper) => console.log(swiper)}
        onSlideChange={() => console.log('slide change')}
        style={{ margin: '20px auto 0', width: '349px', height: '150px' }}
      >
        
          {/* Map through each user data and create a slide for each */}
          {usersData.map((user,index) =>
            <SwiperSlide key={index}>
              <img src={user.profileImageURL} alt={`Service Banner ${index + 1}`}/>
              <p>{user.nickname}</p>
              <p>{user.introduction}</p>
            </SwiperSlide>
          )}
          
      </Swiper>
    </>
  );
};

export default BestCreator;

위의 코드는 Firestore의 users 컬렉션에서 모든 문서를 가져와서 usersData 상태에 저장한 후 이 상태를 사용하여 각 사용자에 대한 슬라이드를 생성한다.