[AWS] 카톡분석 프로젝트-11 / React 이미지 슬라이드 구현

 

서비스 배포는 이미 했지만 그동안 못한 포스팅을 이제야 쓴다.

 

카톡분석 서비스 주소

카톡분석 왕 테스트

 

---

 

카톡분석 서비스는 기본적으로 카카오톡 파일을 업로드 해야 분석을 시작할 수 있다.

(파일은 저장하지 않는다)

 

그런데 저장후 불러오는 과정이 까다로워 이미지 슬라이드로 설명이 필요한 상황!

 

아래와 같은 슬라이드 구현이 필요했다.

 

 

---

 

React-slick 과 Carousel

 

React-slick 과 Carousel(캐러셀) 을 이용해 슬라이드를 구현해보자.

 

1. 설치

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

 

2. import

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

 

3. 스타일

 

- 원하는 대로 커스텀하면 된다.

const Container = styled.div`
  margin-left : 10%;
  margin-right : 10%;
  overflow:hidden;
`;

const StyledSlider = styled(Slider)`
  .slick-dots{
    bottom:-50px;
    margin-top:200px;
  }
  .slick-slide div{
    outline: none;
  }
`;

const ImageContainer = styled.div`
  margin: 0 0px;
`;

const Image = styled.img`
min-width:100%;
min-height:100%;
max-width:100%;
max-height:100%;
`;

 

4. 이미지 불러오기

 

 

5. return에 나타내기

render() {
 return (
  <Container>
    <h3>2. PC에서 카톡 대화내용 가져오는 방법</h3>
    <StyledSlider {...settings}>
    {webitems.map(item => {
      return (
        <div key={item.id}>
          <ImageContainer>
            <Image src={item.url} />
          </ImageContainer>
        </div>
      );
    })}
  	</StyledSlider>
  </Container>
  );
}

---

 

위 내용을 따라하면 캐러셀을 쉽게 구현할 수 있다.

 

궁금한점이 있으면 댓글 로 문의바랍니다

 

 

 

 

References:

https://velog.io/@cookncoding/React-slick%EC%97%90-styled-components-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

https://velog.io/@kopu94/Slick-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C

https://react-slick.neostack.com/

https://code.tutsplus.com/ko/tutorials/create-the-perfect-carousel-part-1--cms-29481