1. 문제의 발단
포트폴리오를 역시나 만들고 있는 중에, 프로젝트나 설명 부분에 옆으로 넘어가는 디자인을 만들면 가독성도 좋고 디자인도 뛰어 날 것이라고 생각했다. '라이브러리를 사용하자!'라는 생각은 있었다만, 아직 익숙하지 않은 타입 스크립트와 생각보다 css를 적용하는 부분이 헷갈렸다. 그래서 복습하고자 이 글을 작성하고 있다.
2. Carousel VS Slider
- 구글링을 하다가 알게 된 사실이다. 생각해 보니 슬라이더는 저렇게 음량등을 조절할 때 사용하는 것이었다!
- 저렇게 사진이나 내용들이 넘어가는 것은 'Carousel'이다. 한국말로는 회전목마.
2. 사전 작업은 어떻게 합니까?
- 우리가 install 해야 할 것은 총 3개
- npm install --save @types/react-slick
- npm install --save react-slick
- npm install --save slick-carousel
- 위의 3가지를 모두 install 해야 한다. 그래야 올바르고 쉽고 간편하게 기능하게 만들 수 있다.
- 그리고 사용할 tsx 파일위에 또 3가지 내용을 import 한다.
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";- css 파일을 따로 불러줘야 한다. 아니면 옆으로 넘길 수 있는 화살표나 지금 어떤 내용을 보고 있는지를 표시하는 점(Dots)이 안 나온다.
3. 일단 코드 쳐 보기
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
function Carousel() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
}
// 사용할 Carousel의 기본 세팅을 해준다. props로 받아 와야 하기 때문에 객체에 넣어서 받아온다.
// 더 많은 설정이 있지만, 그것은 직접 코드를 뜯어 보면 쉽게 알 수 있다.
// 위의 설정은 홈페이지에 나와있는 기본 설정을 한번에 보여줄 갯수만 1개로 바꾼 것이다.
<section className="page-carousel">
<Slider {...settings}>
<div>거창한 내용</div>
<div>대단한 내용</div>
<div>멋있는 내용</div>
<div>예쁜 내용</div>
<div>무언가 엄청난 내용</div>
</Slider>
</section>
}
export default Carousel;- 이렇게 하면 기본적인 케러솔을 볼 수 있다. 위의 예시 그림과 비슷하게 만들어질 것이다. 기본적인 css는 적용되어 있고, 기능 또한 적용되어 있다.
4. 커스텀하기
- 이대로 쓰면 모두가 똑같은 디자인과 UI를 가지게 될 수 있으므로, 조금 바꿔본다.
화살표 커스텀
- 화살표는 이미지 혹은 아이콘 뭐든지 가능하다. 아에 컴포넌트로 만들어 넣을 수 있다.
- 그러므로 tsx 파일인 NextArrow.tsx 파일을 만들었다.
import React from "react";
interface NextArrowProps {
onClick?: React.MouseEventHandler<HTMLDivElement>;
}
// 타입스크립트를 사용하기 때문에 onClick 이벤트를 props로 받아준다.
// className을 받아줄 수 도 있다. 그리고 부모 컴포넌트에서 설정해 줘도 된다.
export default function NextArrow({ onClick }: NextArrowProps) {
return <div className="next-arrow" onClick={onClick}>누르면 넘어감</div>;
}- html 태그를 img로 바꿔서 이미지를 넣을 수 도 있다. css를 설정하면 마음대로 사용할 수 있다.
- 하지만 css가 조금 곤란하다. 원래 있던 slick 자체 테마에 있던 위치 설정을 해놓은 css들을 일단 모두 써 놓고, 이후에 조금씩 바꿔 가는 방향으로 작업해야 원하는 위치에 화살표를 위치시킬 수 있다.
.next-arrow {
right: -25px;
font-size: 20px;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
transition: 200ms ease-in-out;
&:before {
line-height: 1;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
}
}- 위의 코드가 거의 기본 코드일 것이다(조금 다를 수 있다. 뭔가 이상하다면 크롬 개발자 도구를 이용해 원래 태마에서 화살표의 css를 그대로 복사해서 붙여 넣고 작업하면 된다). 태그와 설정들을 마친 후에 css 작업할 때 붙여놓고 보면서 원하는 위치를 잡는다.
- 그리고 부모 컴포넌트인 Carousel로 다시가서 세팅을 바꿔준다.
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import NextArrow from "../components/NextArrow";
function Carousel() {
const settings {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
nextArrow: <NextArrow />
}
// nextArrow에 불러온 <NextArrow />를 설정해 준다. 그러면 바뀐 화살표를 볼 수 있다.
<section className="page-carousel">
<Slider {...settings}>
<div>거창한 내용</div>
<div>대단한 내용</div>
<div>멋있는 내용</div>
<div>예쁜 내용</div>
<div>무언가 엄청난 내용</div>
</Slider>
</section>
}
export default Carousel;Dots 커스텀
- dots는 className을 다르게 설정해서 적용할 수 있다. 화살표처럼은 컴포넌트 자체로는 안 되는 것 같다.
- 하지만 css는 화살표와 마찬가지로 기본 설정을 똑같이 뺏겨와서 설정한 후에 조절해야 한다.
- 일단, 부모 컴포넌트인 Carousel.tsx를 설정한다.
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import NextArrow from "../components/NextArrow";
function Carousel() {
const settings {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
nextArrow: <NextArrow />,
dotsClass: "custom-dots"
}
// dotsClass에 클레스를 설정해 준다. 그러면 바뀐 Dots를 볼 수 있다.
<section className="page-carousel">
<Slider {...settings}>
<div>거창한 내용</div>
<div>대단한 내용</div>
<div>멋있는 내용</div>
<div>예쁜 내용</div>
<div>무언가 엄청난 내용</div>
</Slider>
</section>
}
export default Carousel;- 그리고 css를 바꾸자.
.custom-dots {
position: absolute;
bottom: -15px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.custom-dots li {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.custom-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 40px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.custom-dots li button:before {
font-family: "slick";
font-size: 2rem;
line-height: 20px;
position: absolute;
top: 10px;
left: 20px;
width: 20px;
height: 20px;
content: "*";
text-align: center;
opacity: 0.9;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.custom-dots li.slick-active button:before {
opacity: 1;
color: #ffffff;
content: "*";
}- 이것이 원래 dots의 css일 것이다. (근데, 진짜 확실하지 않다. 이미 너무 많은 것을 바꿔버렸다. 개발자 도구를 이용해 꼭 기본 css 세팅이 된 내용을 복사해서 가지고 와서 붙여놓고 바꿔보자)
- 여기까지 하면 바뀐 내용들을 볼 수 있을 것이다.
'Coding > Today I Learned' 카테고리의 다른 글
| 2022.01.20(Tue.) <Post CSS> (0) | 2022.01.20 |
|---|---|
| 2022.01.19(Wed) <GitHub pages를 이용한 리액트 정적 사이트 배포> (0) | 2022.01.19 |
| 2022.01.14(Fri.) <React에서 Typescript로 Props 사용하기> (0) | 2022.01.14 |
| 2022.01.13(Thu.) <CSS를 이용한 애니메이션의 표현> (0) | 2022.01.13 |
| 2022.01.11(Tue.) <일단 쓰면서 배우는 Figma> (0) | 2022.01.11 |
