react-slick 라이브러리의 페이지이동 오류해결 (Slider Syncing(AsNavFor))

🚩 오류 발생 상황

1. react-slick 라이브러리의 Slider Syncing(AsNavFor)을 사용중

(https://react-slick.neostack.com/docs/example/as-nav-for)
2. MainCarousel의 item을 클릭하면 해당 애니 페이지로 이동하지않는 오류 발생 (마지막 애니의 페이지로 이동)

3. Slider Syncing에서 onClick이벤트 발생 시,  animeId가 제대로 전달되지 않는것으로 파악

  const handleClick = (e: React.MouseEvent, animeId: number) => {
    if (dragging) {
      e.stopPropagation();
      return;
    }

    console.log(animeId);
    // navigate(`/animes/${animeId}`);
  };

  return (
    <>
      {isLoading && <AnimeRankingLoading />}
      {animes && (
        <>
          <AnimeRankingContainer>
            <h1>{title}</h1>
            <Slider
              {...SyncingMainCarousel}
              ref={(mainNav) => setMainNav(mainNav ?? undefined)}
              asNavFor={subNav}
              beforeChange={() => setDragging(true)}
              afterChange={() => setDragging(false)}
            >
              {animes.map((ani, i) => (
                <HighlightItemContainer key={ani.animeId}>
                  <HighlightItem
                    image={ani.thumbnail}
                    onClick={(e: React.MouseEvent) =>
                      handleClick(e, ani.animeId)
                    }
                  >
                    <Rank size="lg">{i + 1}</Rank>
                    <h3>{ani.genres.join("/")}</h3>
                    <h2>{ani.title}</h2>
                  </HighlightItem>
                </HighlightItemContainer>
              ))}
            </Slider>

            <Slider
              {...SyncingSubCarousel}
              asNavFor={mainNav}
              ref={(subNav) => setSubNav(subNav ?? undefined)}
            >
              {animes.map((ani, i) => (
                <SliderItem key={ani.animeId}>
                  <SliderItemImage image={ani.thumbnail}>
                    <Rank>{i + 1}</Rank>
                  </SliderItemImage>
                  <div>{ani.title}</div>
                </SliderItem>
              ))}
              {/* carousel 레이아웃 망가짐 방지: div 추가  */}
              <div />
            </Slider>
          </AnimeRankingContainer>
        </>
      )}
    </>
  );

 

항상 마지막 애니의 id가 전달됨

 

🚩 해결

<HighlightItem> element에 'anime-id' 데이터 속성을 설정하고, 해당 값을 읽어오는 방식으로 해결했습니다.

 

1. 두 Slider를 구분하기 위해 main carousel을 감싸는 div 생성 후, ref 연결

2. anime-id 데이터 속성 설정

3. main carousel → .slick-current 클래스 → anime-id 데이터 속성을 가지고 있는 element 선택

4. anime-id 데이터 속성으로 해당 페이지로 이동

export default function AnimeRanking({ title }: AnimeRankingProps) {
  const mainCarouselRef = useRef<HTMLDivElement>(null);
  const handleClick = (e: React.MouseEvent) => {
    // 3. main carousel → .slick-current 클래스 → anime-id 데이터 속성을 가지고 있는 element 선택
    const currentElement = mainCarouselRef.current?.querySelector(
      ".slick-current div[data-anime-id]",
    );

    if (dragging) {
      e.stopPropagation();
      return;
    }

    // 4. anime-id 데이터 속성으로 해당 페이지로 이동
    if (currentElement) {
      const el = currentElement as HTMLDivElement;
      // console.log(el.dataset.animeId);
      navigate(`/animes/${el.dataset.animeId}`);
    }
  };

  return (
    <>
      {isLoading && <AnimeRankingLoading />}
      {animes && (
        <>
          <AnimeRankingContainer>
            <h1>{title}</h1>
            {/* 
             * 1. 두 Slider를 구분하기 위해 main carousel을 감싸는 div 생성 후, ref 연결 
             */}
            <div ref={mainCarouselRef}>
              <Slider
                {...SyncingMainCarousel}
                ref={(mainNav) => setMainNav(mainNav ?? undefined)}
                asNavFor={subNav}
                beforeChange={() => setDragging(true)}
                afterChange={() => setDragging(false)}
              >
                {animes.map((ani, i) => (
                  <HighlightItemContainer key={ani.animeId}>
                    <HighlightItem
                      image={ani.thumbnail}
                      // 2. anime-id 데이터 속성 설정
                      data-anime-id={ani.animeId}
                      onClick={(e: React.MouseEvent) => handleClick(e)}
                    >
                      <Rank size="lg">{i + 1}</Rank>
                      <h3>{ani.genres.join("/")}</h3>
                      <h2>{ani.title}</h2>
                    </HighlightItem>
                  </HighlightItemContainer>
                ))}
              </Slider>
            </div>

            <Slider
              ...생략
            </Slider>
          </AnimeRankingContainer>
        </>
      )}
    </>
  );
}