리액트로 carousel을 만들고 싶어서 검색을 해봤다.
그랬더니 아래의 코드를 사용한다는것을 알게 되었다.

  const prevSlide = () => {
    setSlide(slide === length - 1 ? 0 : slide + 1);
  };
  const nextSlide = () => {
    setSlide(slide === 0 ? length - 1 : slide - 1);
  };

하지만 도대체 왜 length-1과 비교하는 것인지
그리고 다음 슬라이드에 왜 slide-1을 하는지 논리가 이해 가지 않았다.
그래서 이 논리에 대해 더 구글링을 직접 해보니 그랬더니 비슷한 이런 코드가 나왔다.

  const nextSlide = () => {
    setSlide(slide === length - 1 ? 0 : slide +1);
  };
  const prevSlide = () => {
    setSlide(slide === 0 ? length - 1 : slide - 1);
  };

설명을 읽고 내가 놓쳤던 것을 알아냈다.
바로 array에서 맨마지막번 째를 length-1라고 한다는 것이다.
따라서 이런식으로 이해를 하게 되었다.

다음 슬라이드로 이동하는 로직

const nextSlide = () => {
  setSlide(slide === length - 1 ? 0 : slide + 1);
};

슬라이드가 배열의 마지막 요소(인덱스 length -1)에 있다면, 슬라이드 순환을 위해 배열의 시작 인덱스(인덱스 0)로 돌아가야 한다. 그렇지 않다면 현재 슬라이드에서 1 증가시킨 인덱스로 이동한다.

이전 슬라이드로 이동하는 로직

const prevSlide = () => {
  setSlide(slide === 0 ? length - 1 : slide - 1);
};

슬라이드가 배열의 첫 번째 요소(인덱스 0)에 있다면, 슬라이드 순환을 위해 배열의 마지막 인덱스로 이동해야 한다(인덱스 length - 1). 그렇지 않다면 현재 슬라이드에서 1 감소시킨 인덱스로 이동한다.

참고한 사이트