REACT - 무한 캐러셀

기본 캐러셀

기본적인 캐러셀의 구조는 다음버튼을 누르면 currentIndex 를 plus 해서
transform 의 translate 속성을 (currentIndex * width) 만큼 변화시키는
방식으로 구현하면 간단하게 구현이 가능하다.

물론 보통의 캐러셀은 원소의 갯수, 총 길이가 정해져있기 때문에
ZeroIndex에서 이전버튼을 클릭하거나, lastIndex에서 다음버튼을 클릭할 경우에는
예외처리를 통해서 Zero To Last로 이동시키는 로직을 추가해준다.

---

무한 캐러셀

먼저 준비재료로 기본 캐러셀이 필요하다.

기본 캐러셀의 동작 방식은 처음이나 끝에서 그 이상의 인덱스로 넘어가려고 할 때
정반대의 인덱스로 이동하며 계속해서 다른 화면을 보여주는 원리이다.

하지만 무한 캐러셀은 한정된 배열에서 마치 한쪽으로 끝없이 움직이는듯 보여지는게 무한 캐러셀이다

무한 캐러셀을 만들기 위해서는 기본 캐러셀에서 약간의 변형을 주면 되는데,

const buttonClick = event => {
    if (
      event.target.className === 'previousButton' ||
      event.target.className === 'fa-solid fa-angle-left fa-xl'
    ) {
      if (categoryPosition === -(categoryData.length / 3) - firstPosition) {
        setTransitionTime(0);
        setCategoryPosition(firstPosition + 1);
        setTimeout(() => {
          setTransitionTime(0.3);
          setCategoryPosition(firstPosition);
        }, 0);
      } else {
        setTransitionTime(0.3);
        setCategoryPosition(categoryPosition - 1);
      }
    } else {
      if (categoryPosition === categoryData.length / 3 + firstPosition) {
        setTransitionTime(0);
        setCategoryPosition(firstPosition);
        setTimeout(() => {
          setTransitionTime(0.3);
          setCategoryPosition(firstPosition + 1);
        }, 0);
      } else {
        setTransitionTime(0.3);
        setCategoryPosition(categoryPosition + 1);
      }
    }
  };

위의 코드를 해석해보면,

1. 내가 클릭한 target이 이전버튼인지 다음버튼인지 첫 if문에서 판별한다.

2. 현재 버튼을 클릭하는 상태가 인덱스의 끝부분인지 아닌지 판별한다.

3. 만약 이전버튼을 눌렀을 때 인덱스가 ZeroIndex 라면 transition을 없애고
   복사된 배열의 같은 ZeroIndex로 이동한다.

4. 다시 transition을 돌려놓고 인덱스를 이동한다.

위의 과정을 거치게되면 UI를 보는 사용자 입장에서는 ZeroIndex(0) 에서
ZeroIndex(1) 로 이동하는 과정을 알 수 없기 때문에 무한히 움직이는것처럼 보이게된다.