[library]MUI Carousel 라이브러리 사용해 구현

✍여러 개 이미지 업로드 하기

여러 개 이미지를 편하게 볼 수 있게 해야 한다
=> 오른쪽 혹은 왼쪽 버튼을 누르면 다음 이미지로 이동할 수 있게 한다

💡 mui Carousel 라이브러리를 활용

1. mui Carousel 설치

npm install react-material-ui-carousel --save

2. carousel import 하기

import Carousel from 'react-material-ui-carousel';

3. carousel 활용해 구현하기

• 여러 개의 이미지를 Carousel 태그로 감싸준다

<Carousel></Carousel>

• Paper import 하기

import { Paper } from '@mui/material';

• 보여주기를 원하는 사진을 Paper 태그로 감싸준다

<Paper></Paper>

🧐 최종코드

<Carousel>
	<Paper><img src={image1} /></Paper>
	<Paper><img src={image2} /></Paper>
	<Paper><img src={image3} /></Paper>
</Carousel>

반복되는 코드 map 메소드를 활용해 줄여 보기

<Carousel>
  {sources.map((item) => (
  	<Paper key={item.id}>
    	<img src={item.src} alt='' />
    </Paper>))}
</Carousel>