무한 슬라이드의 개념

제한된 화면 크기에서 다양한 정보를 보여주기 위하여 슬라이드 UI를 많이 사용한다.

보통 화면을 쓸어 넘기면 다음 화면을 보여주는 식이다.

다른 스케일과 같은 부분을 제외하고 슬라이드가 여러 장 있다면 요런 식의 배열의 값이 들어있을 것이다.

const images = [ 'https://image.com/image_1.png', 'https://image.com/image_2.png' ];

images를 리스트로 보여주려면 이러한 코드가 되겠다.

{images.map(( image, index ) => (<img key={index} src={image} />))}

여기서 의문점이 생긴다.

보통 화면을 넘기면 애니메이션이 나오는데 마지막 지점에서 쓸어넘기면, 어떻게 되겠는가?

양쪽 마지막에서 더이상 움직이지 않게 하거나,

마지막 페이지면 첫 번째 페이지로 가고 첫 번째 페이지면 마지막 페이지로 이동하게 할 것이다.

하지만 단순히 그렇게 처리해버린다면, 에코가 궁을 사용했을 때와 같이 후진하게 될 것이다.

그러면 엄청 부자연스럽다.

이를 해결할 방법을 생각해 봤을 때 이미지 배열의 개수를 넘기게 된다면, 배열을 이어 붙여서 자연스럽게 보일 방법을 생각해보았다.

하지만 이 방법은 메모리가 많이 소비되기 때문에 좋지 않은 방법이라고 생각한다.

그러면 또 어떤 방법이 있을 지 찾아보았다.

첫 번째 이미지는 맨 마지막에 두고, 마지막 이미지를 첫 번째로 둔 다음 1번 이미지를 처음에 보여준다.

만약 맨 뒤에있는 페이지로 이동하게 된다면, 일단 마지막 1번으로 이동한 후 애니메이션이 모두 동작하고

애니메이션을 제거 후 이동하고 다시 애니메이션을 추가하면 된다.

처음엔 별로 납득하기 힘든 방법이었지만, 여러 서비스를 찾아보니 대부분 이 방식을 사용하는 것 같았다.