슬라이드 UI
제한된 화면 크기에서 다양한 정보를 보여주기 위하여 슬라이드 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번으로 이동한 후 애니메이션이 모두 동작하고
애니메이션을 제거 후 이동하고 다시 애니메이션을 추가하면 된다.
처음엔 별로 납득하기 힘든 방법이었지만, 여러 서비스를 찾아보니 대부분 이 방식을 사용하는 것 같았다.