복합적이면 분리를 해야 쉬워진다.

import React, { useState } from 'react'

import { AnimeItem } from './AniList';

import * as S from './AniList.style';

type ItemListContainerProps = {

 

    item: AnimeItem;

  }

const ItemListContainer:React.FC<ItemListContainerProps> = ({ item }) => {

    const [currentIndex5, setCurrentIndex5] = useState(0);

        const itemsPerPage = 6;

    const handlePrevClick = () => {

     

        setCurrentIndex5((prevIndex) => (prevIndex - 1 + itemsPerPage) % itemsPerPage);

      };

 

      const handleNextClick = () => {

        setCurrentIndex5((prevIndex) => (prevIndex + 1) % itemsPerPage);

      };

 

    return  (

    <S.ItemListContainer>

      <S.LeftButton onClick={handlePrevClick}>Previous</S.LeftButton>

      {item.item_list?.map((subItem, subIndex) => (

        <S.ItemContainer

          key={subItem.id}

          style={{

            display: subIndex >= currentIndex5 && subIndex < currentIndex5 + itemsPerPage ? 'flex' : 'none',

          }}

        >

          {subItem.images && subItem.images.length > 0 && subItem.images[0].img_url && (

            <S.Image src={subItem.images[0].img_url} alt={subItem.name} />

          )}

          <p>{subItem.name}</p>

        </S.ItemContainer>

      ))}

      <S.RightButton onClick={handleNextClick}>Next</S.RightButton>

    </S.ItemListContainer>

  );

}

export default ItemListContainer

캐러셀을 만들다가 

[ { [ { } ] } ] 이런 구조를 만났는데 이걸 싱글페이지에서 해결하려고 하니 

배열을 뽑고 나열 한다음 좌우버튼을 각 리스트 양옆에 두고 버튼을 누르면 

배열에 뽑힌 모든 리스트들이 같이 움직이는 현상이 발생.

인덱스가 동일해서 발생한 현상인데 

이걸 싱글페이지에서 해결하려고 했지만 이틀을 이거에 매달려도 해결을 못함.

결국 헬프 쳤는데 [ { [ { } ] } ] 여기서  [ { } ] 이 부분을 컴포넌트로 빼고 인덱스를 여기다 주면 

리스트랑 인덱스랑 1:1로 보는 효과가 있어서  [ { [ { } ] } ] 일때 하나로 처리되던 인덱스를 개별로 주는 효과를 봄

그래서 컴포넌트로 빼고 인덱스 가져와서 돌리니 말끔히 해결.