React | Carousel 구현

<Carousel> 컴포넌트 구현

navigation 버튼(prev, next)

• 첫 슬라이드, 마지막 슬라이드에서 이전/다음 슬라이드로 넘어가는 것을 방지하기 위해 버튼을 transform으로 숨기고 disabled 속성을 주어 비활성했다.

pagination bar

• pagination bar를 이동시킬 때 position: absolute를 주고 left로 이동시키는 방법과 transform 속성으로 이동시키는 방법이 있다. (음수 margin을 사용하는 방법도 있지만 transition으로 애니메이션 효과를 주는 경우 덜 매끄럽게 움직인다고 해서 쓰지 않았다.) left의 경우 부모 요소를 기준으로 이동거리를 계산해야 하기 때문에 데이터 배열의 길이를 이용해 계산해야 하는 반면, transform은 자기 자신을 기준으로 계산하므로 한 번에 100%씩 이동시키면 되기 때문에 transform이 더 간단하다고 판단했다.

구현 중 발생한 문제와 해결한 방법

문제 1.

navigaion 버튼을 클릭했을 때 클래스명이 prev라면 왼쪽으로, 아니면 오른쪽으로 이동하는 로직을 구현했었는데, 종종 반대 방향으로 이동하는 문제점이 발생했다.

해결 1.

조건이 불분명하기 때문일 것이라 생각하여 prev, next 모두 조건에 포함하니 반대로 이동하는 현상이 발생하지 않았다.

문제 2.

navigation 버튼 안에 아이콘을 <i> 태그로 넣었는데, 아이콘 부분을 클릭하면 슬라이드가 이동하지 않았다.

해결 2.

원인은 버튼의 클래스명(prev, next)을 기준으로 함수를 적용했는데 <i> 태그에는 해당 클래스명이 없어서 함수가 작동하지 않기 때문이었다. <i> 태그에도 같은 클래스명(prev, next)을 부여하니 해결되었다.