devlog

React Slick 설치

npm i react-slick

아래의 css 도 설치해 줍니다.

npm install slick-carousel

기본 Slider 생성

css 를 불러와야합니다.

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

export default function SimpleSlider() {
  var settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
    <Slider {...settings}>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
      <div>
        <h3>3</h3>
      </div>
      <div>
        <h3>4</h3>
      </div>
      <div>
        <h3>5</h3>
      </div>
      <div>
        <h3>6</h3>
      </div>
    </Slider>
  );
}

현재 선택된 슬라이드 index 값 가져오기

useState를 활용하여 현재 슬라이드의 index를 넣어줍니다.

react-slick의 api문서의 beforeChange를 통해 받아올 수 있습니다.

beforeChange
Type: func
Default: null
Description: Index change callback. `(oldIndex, newIndex) => ...`

 const [slideIndex, setSlideIndex] = useState(0);
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
    beforeChange: (current, next) => {
      return setSlideIndex(current);
    },
  };

슬라이드 컴포넌트별로 현재 선택된 슬라이드인지 비교합니다.

슬라이드는 0부터 시작합니다.

<Slider {...settings}>
      <Slide border={0==slideIndex}>
        <h3>1</h3>
      </div>
      <Slide border={1==slideIndex}>
        <h3>2</h3>
      </div>
      <Slide border={2==slideIndex}>
        <h3>3</h3>
      </div>
      <Slide border={3==slideIndex}>
        <h3>4</h3>
      </div>
      <Slide border={4==slideIndex}>
        <h3>5</h3>
      </div>
      <Slide border={5==slideIndex}>
        <h3>6</h3>
      </div>
    </Slider>

현재 선택된 슬라이드가 맞으면 true 아니면 false를 porps.border로 전달해줍니다.

전달 받은 props.border가 true 이면 빨간색 테두리 아니면 none으로 스타일링 해줍니다.

const Slide = styled.div`
	border:${(props)=> (props.border ? "1px solid red" : "none")}
`;

2021.03.21 - [Usage/ReactJS] - Table of Contents 스크롤 메뉴 구현

이전 포스트의 확장판입니다.

ToC 스크롤 메뉴가 구현되어 있다는 가정하에 시작하겠습니다.

스크롤의 현재 위치, 동적으로 구현하고픈 페이지의 상단과 하단 위치의 절대 값

//현재 위치가 이곳에 왔을때 active true
const [active, setActive] = useState(false);
const element = useRef(null);

useEffect(() => {
  const onScroll = () => {
    const scrollTop = window.pageYOffset + 100; //현재 위치
    //현재 페이지 상단
    const pagePosTop =
    element.current.getBoundingClientRect().top + window.pageYOffset;
    //현재 페이지 하단
    const pagePosBot =
    element.current.getBoundingClientRect().bottom + window.pageYOffset;
    if (pagePosTop < scrollTop && scrollTop < pagePosBot) {
      setActive(true);
    } else {
      setActive(false);
    }
  };
  if (loc !== 0) {
  	window.addEventListener("scroll", onScroll);
  }
  return () => {
  	window.removeEventListener("scroll", onScroll);
  };
}, [active]);

-------
return(
 <Page id="fourth" ref={element}>
 {* *}
 </Page>
)

스크롤이 페이지 영역에 들어왔을때 나타나게끔 css

styled-components를 이용해 active값을 받아 구현

const IconStyle = styled.img`
  width: 40rem;
  height: 15rem;
  animation: ${(props) => (props.active ? "fadein 3s" : "fadeout 3s")};
  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
`;
--------
return (
	<IconStyle src="./icon.png" active={active} />
);