( es6 / 함수형 ) react-slick 라이브리로 캐러셀 구현

팀 프로젝트중 메인페이지에 해당하는 카테고리 캐러셀구현을 맡게되어
라이브러리를 찾던중 react-slick이 많이 쓰이는 라이브러리중 하나라고해서 해당 라이브러리를 사용해 카테고리 캐러셀을 구현했습니다

1. 모달 관련 변수 초기화 및 상태 업데이트

const [isShow, setIsShow] = useState(false);
const [moviesGenre, setMoviesGenre] = useState({ data: [] });
const [movieId, setMovieId] = useState(null);
const onModalClose = () => setIsShow(false);

위의 코드는 모달 관련 변수를 초기화하고 상태를 업데이트하는 부분입니다. isShow는 모달이 표시되는지 여부를 나타내는 상태값이며, moviesGenre는 영화 장르 데이터를 저장하는 상태값입니다. movieId는 현재 선택된 영화 아이디를 저장하는 상태값입니다. onModalClose 함수는 모달을 닫을 때 호출되는 함수로, isShow 상태값을 false로 업데이트합니다.

2. 영화 장르 데이터를 가져오는 비동기 함수 정의

const fetchMoviesGenre = async () => {
  const responseAction = await getMoviesGenre(1, GenreId);
  setMoviesGenre(responseAction.data);
};

fetchMoviesGenre 함수는 비동기로 실행되며, 영화 장르 데이터를 가져오는 역할을 합니다. getMoviesGenre 함수를 호출하여 해당 장르의 영화 데이터를 가져온 후, setMoviesGenre 함수를 사용하여 moviesGenre 상태값을 업데이트합니다.

3. 모달 열기 및 닫기 함수 정의

const onModalClick = (id) => {
  const num = moviesGenre.data.findIndex((item) => item.id === id); // id값 추출
  setIsShow(true);
  setMovieId(moviesGenre.data[num]); //data값에 아이디값 대입
};

const onModalClose = () => setIsShow(false);
onModalClick 함수는 모달을 열기 위해 호출되는 함수입니다. id를 인자로 받아 해당 영화의 인덱스를 찾은 후, setIsShow(true)를 통해 모달을 열고, setMovieId를 통해 선택된 영화의 아이디를 업데이트합니다. onModalClose 함수는 모달을 닫을 때 호출되는 함수로, setIsShow(false)를 통해 모달을 닫습니다.

4. 슬라이더 설정 객체 정의

const settings = {
  dots: false,
  arrows: false,
  infinite: false,
  speed: 600,
  slidesToShow: 6,
  slidesToScroll: 5,
  prevArrow: <CaretLeftIcon />, // 이전 화살표 아이콘
  nextArrow: <CaretRightIcon />, // 다음 화살표 아이콘
};

settings 객체는 슬라이더의 설정을 담고 있습니다. dots는 페이지 네비게이션 도트 표시 여부, arrows는 화살표 표시 여부, infinite는 무한 반복 여부, speed는 슬라이드 전환 속도, slidesToShow는 한 번에 보여줄 슬라이드 개수, slidesToScroll은 한 번에 넘길 슬라이드 개수를 나타냅니다. prevArrow와 nextArrow는 이전과 다음 화살표에 사용될 아이콘 컴포넌트를 나타냅니다.

5. 컴포넌트 마운트 시 영화 장르 데이터 가져오기

useEffect(() => {
  fetchMoviesGenre();
}, []);

useEffect 훅을 사용하여 컴포넌트가 마운트되었을 때 영화 장르 데이터를 가져오도록 설정합니다. fetchMoviesGenre 함수가 실행되며, [] 빈 배열을 의존성 배열로 전달하여 컴포넌트가 마운트될 때 한 번만 실행되도록 합니다.

6. 슬라이더 컴포넌트 렌더링

<Slider {...settings}>
  {moviesGenre?.data.map((movie) => (
    <PosterCategory
      key={movie.id}
      movie={movie}
      onModalClick={onModalClick}
      movieId={movieId}
      callback={fetchMoviesGenre}
    />
  ))}
</Slider>

마지막으로, 슬라이더 컴포넌트를 렌더링하는 부분입니다. Slider 컴포넌트는 React Slick 라이브러리의 슬라이더 기능을 제공합니다. settings 객체를 전달하여 슬라이더의 설정을 지정하고, moviesGenre?.data를 매핑하여 각 영화에 대한 PosterCategory 컴포넌트를 렌더링합니다. key, movie, onModalClick, movieId, callback 등의 props를 PosterCategory 컴포넌트에 전달해주면서 마무리했습니다