[라이브러리] Material UI + Slick을 이용한 multiple card carousel 만들기

🤔 제작동기

토이프로젝트 제작 중, 3*3 바둑판 형태를 띈 슬라이드식 리스트 UI를 만들어야하는 상황이 생겼다.

 

📚 사용할 라이브러리들

1. Slick

검색해본 결과 multiple row가 가능한 carousel list library는 대표적으로 slick이라는 라이브러리가 있는 것으로 파악이 되었다. 원래는 JQuery로 제공해왔는데, 최근에(아마도) react도 제공하는 것 같다. 
https://react-slick.neostack.com/docs/get-started

Neostack

slick for react는 위의 링크를 타고 들어가서 설치하는 방법을 볼 수 있다. 필자는 npm을 이용하여 아래와 같이 설치하였다. 

npm install react-slick --save
npm install slick-carousel --save

설치후에 아래와 같이 import를 해주면 된다.

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

 

2. Material UI

Material UI를 선택한 이유는 일반적으로 많이 사용하는 UI Component이기 때문이다. 이전에 개인 스터디용 프로젝트로 To-do-list를 만들었을 때에는 Ant Design을 사용했지만, 다른 Component도 경험해보고 싶은 마음에 결정한 것도 있다. 
https://mui.com/getting-started/installation/

Installation - MUI

Material UI 또한 설치방법은 위의 링크를 참고하면 된다. 역시 npm을 이용하여 설치해주었다.

// with npm
npm install @mui/material @emotion/react @emotion/styled
// with npm 아이콘이 필요하다면
npm install @mui/icons-material

설치후에 아래와 같이 import를 해주면 된다.

 

👽 소스를 보자

import { useParams } from "react-router-dom";
import React, { useState, useEffect } from 'react';

import firebase from '../../firebase';
import { getFirestore, collection, query, getDocs } from "firebase/firestore";

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import { CardActionArea } from '@mui/material';
import Typography from '@mui/material/Typography';

import Slider from "react-slick";

import Styled from "./Styled";

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import Image from './bg.jpg'; // Import using relative path
function List() {
    const [cards, setCard] = useState([]);
    const fetchCard = async () => {
        const database = getFirestore(firebase);  //정보가 올바르면 아래 파이어스토어 접근
        const q = query(collection(database, "..."))
        getDocs(q).then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
                setCard(cards => [...cards, doc.data()])
            })
        })
    }
    useEffect(() => {
        fetchCard();
    }, []);
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        rows: 3, // slide의 행 개수
        slidesPerRow: 3 // 보여질 행의 개수 - rows와 slidesPerRow만 설정하면 3*3으로 보여짐
        //slidesToShow: 3, // 한 화면에 보여줄 아이템수 - 로우 하나 기준으로
        //slidesToScroll: 3 // 한번에 슬라이드 시킬 아이템 개수 - 로우 하나 기준으로
    };



    const styles = {
        paperContainer: {
            backgroundImage: `url(${Image})`
        }
    };

    const { id } = useParams();
    return (
        <>
            <Styled>
                <Slider {...settings}> // slick을 settings에 맞춰 뿌려준다.
                    {
                        cards.map(c => { // firestore로 가져온 data list를 map으로 뿌려준다.
                            return (
                                <Card sx={{ maxWidth: 200 }}> // mui의 card를 card list만큼 뿌려준다.
                                    <CardActionArea>
                                        <CardContent style={styles.paperContainer}>
                                            <Typography gutterBottom variant="h5" component="div">
                                                {c.grt_title}
                                            </Typography>
                                            <Typography variant="body2" color="text.secondary">
                                                {c.grt_contents}
                                            </Typography>
                                        </CardContent>
                                    </CardActionArea>
                                </Card>
                            )
                        })
                    }
                </Slider>
            </Styled>


        </>
    );
}
export default List;

 

완성! : https://github.com/yeojisun/react-slick-card-multiple-row-carousel.git

GitHub - yeojisun/react-slick-card-multiple-row-carousel: mui card + react slick