[react-slick] currentSlide, slideCount error

react does not recognize the `currentSlide` prop on a dom element. if you intentionally want it to appear in the dom as a custom attribute, spell it as lowercase `currentslide` instead. if you accidentally passed it from a parent component, remove it from the dom element.

 

react does not recognize the `slideCount` prop on a dom element. if you intentionally want it to appear in the dom as a custom attribute, spell it as lowercase `slidecount` instead. if you accidentally passed it from a parent component, remove it from the dom element.

 

 

react-slick 라이브러리를 사용하는데, 위의 warning을 만났다.

아래는 수정 전 코드이다.

import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';

export const BasicCarousel = ({
  imageList,
  alt = 'prop',
  dots = true,
  slidesToShow,
  slidesToScroll,
  height,
  infinite = true,
  prevArrow = <IoIosArrowBack />,
  nextArrow = <IoIosArrowForward />,
  onItemClick,
}) => {
  const settings = {
    dots,
    infinite,
    speed: 500,
    slidesToShow,
    slidesToScroll,
    prevArrow,
    nextArrow,
  };

  return (
    <StyledSlider {...settings} $height={height}>
      ...
    </StyledSlider>
  );
};

 

 

서칭해보니, Arrow를 커스텀 후 사용하면 해결된다고 한다.

https://github.com/akiran/react-slick/issues/623#issuecomment-629764816

 

 

아래는 수정된 코드이다.

import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';

export const BasicCarousel = ({
  imageList,
  alt = 'prop',
  dots = true,
  slidesToShow,
  slidesToScroll,
  height,
  infinite = true,
  onItemClick,
}) => {
	
    // arrow 커스텀
  const PrevgArrow = ({ currentSlide, slideCount, ...props }) => <IoIosArrowBack {...props} />;
  const NextArrow = ({ currentSlide, slideCount, ...props }) => <IoIosArrowForward {...props} />;

  const settings = {
    dots,
    infinite,
    speed: 500,
    slidesToShow,
    slidesToScroll,
    prevArrow: <PrevgArrow />,
    nextArrow: <NextArrow />,
  };

  return (
    <StyledSlider {...settings} $height={height}>
      ...
    </StyledSlider>
  );
};