리액트 사진 슬라이드 구현하기

이번 프로젝트의 서비스 소개 페이지가 슬라이드 형식으로 구성되어 있기에, 연습 겸 슬라이드를 구현해 볼 겁니다.

 

 

 

 

 

시작에 앞서 인터넷에서 맘에 드는 사진 3개를 다운받아서 기본 세팅을 했습니다.

 

 

 

 

 

제가 진행하는 프로젝트는 웹 앱이라 아쿠아색으로 웹 앱을 표현했습니다. flex를 통해 사진을 가로정렬 시켰으며, 버튼을 누를 때마다 각 사진이 넘어갑니다. 최종적으로 overflow:hidden을 적용해서 화면에서 벗어나는 요소는 숨길 거임

 

 

 

 

핵심

1. 인덱스 값을 통해 사진을 조정

2. 버튼을 눌렀을 때 웹 앱의 가로 값(사진의 크기)만큼 사진을 왼쪽 또는 오른쪽으로 이동

 

 

 

 

 

useState를 통해 인덱스 값과 기본 style값을 설정합니다. 또한 설정한 style값을 인라인 스타일 요소로 지정합니다.

 

초기 인덱스는 0이며, 초기 스타일 또한 translateX(-000%) 될 테니, 인덱스 0에서는 움직이지 않을 것입니다.

 

 

 

 

 

왼쪽버튼을 한 번 누르면 인덱스가 1로 바뀌고, translateX(-100%)가 적용되어 0에서 사진을 웹앱을 차지하는 크기(사진의 가로 값)만큼 왼쪽으로 이동시킵니다. 그러면 1번 인덱스의 사진이 나오겠죠?? 마찬가지로 인덱스가 2가 되면 translateX(-200%)이 되고 2번 사진이 있는 위치로 이동합니다

 

그림이 맞는지는 모르겠으나 맥락은 대충 이렇습니다.

 

이제 버튼을 클릭했을 때 style를 바꿀 함수를 만들어줍니다.

 

 

 

 

 

오른쪽 버튼을 누르면 실행될 함수입니다. index 변수에 [현재 인덱스 값 +1]을 저장하고, 만약 이 값이 사진 전체의 개수보다 크면 return 시킵니다.

 

만약 크지 않다면 현재 translateX 값을 -index00%로 설정합니다. 그리고 index 변수를 setCurrentIndex의 인수로 넣어서 currentIndex값을 업데이트합니다.

 

 

 

 

 

 

오른쪽 버튼을 누를 때마다 잘 이동하는 것을 확인할 수 있습니다.

 

 

 

 

 

왼쪽도 마찬가지로 설정합니다. 인덱스는 0부터 시작하기에 현재 인덱스에서 1을 뺀 값이 0보다 작다면 바로 return 시킵니다. 나머지는 right함수와 똑같습니다.

 

 

 

 

 

마지막으로 더 자연스러움을 위해 transition을 적용하고, overflow:hidden을 적용시켜 주면!.!

 

 

자연스럽고 매끄럽게 넘어가는 것을 확인할 수 있습니다. 다음에는 터치 슬라이드를 적용시키겠습니다. 감사합니다.