[리액트] scrollIntoView를 활용한 캐러셀 제작

캐러셀(carousel)은 슬라이드쇼 같은 방식으로 콘텐츠를 표시하는 UX이다.

캐러셀은 회전목마를 의미하는 영단어인데, 캐러셀 메뉴를 보면 왜 이런 이름이 붙었는지 알 수 있다.

 

부스트코스

 

프로그래머스

 

11번가

 

쿠팡

 

아무 사이트나 들어가봐도 캐러셀 메뉴가 있는 것을 쉽게 찾아볼 수 있다.

이 캐러셀을 리액트에서 scrollIntoView를 사용해서 제작해본다.

 

아래 코드와 같이 캐러셀의 모양을 우선 잡아준다.

리액트앱 화면

'display: flex' 속성으로 이미지 요소들을 가로로 쭉 펴준다.

'overflow: hidden' 속성으로 부모 요소를 넘어간 요소들을 보이지않게 숨긴다.

'gap' 속성은 이미지 요소들 끼리의 간격을 설정할 수 있게 해준다.

'align-items: center' 속성은 이미지 요소들을 부모 요소를 기준으로 가운데에 있게 해준다.

 

그리고 map 메소드를 통해 생성된 div들을 구분하여 사용할 수 있도록 useRef를 사용한다.

이렇게 코드를 수정하면 map 메소드에 의해 만들어진 div들이 imageRef의 current에 순서대로 저장되게 된다.

콘솔에서 확인

 

이제 메뉴 내의 콘텐츠를 이동시킬 버튼들을 만든다.

리액트앱 화면

 

버튼을 만들었으니 버튼을 클릭하면 동작할 함수를 만들어줘야 한다.

onButtonClick 함수는 currentIndex를 인자로 받고, 인자의 숫자에 따라 동작하게 된다.

firstIndex와 lastIndex를 선언해둔 이유는 캐러셀 메뉴가 끊기지 않고 동작하도록 하기 위함이다.

만약 currentIndex가 firstIndex보다 작다면 lastIndex에 해당하는 콘텐츠가 보이도록 하고,

lastIndex보다 크다면 firstIndex에 해당하는 콘텐츠가 보일 것이다.

그 외에는 currentIndex에 해당하는 콘텐츠를 보여준다.

onSelectImage 함수는 아직 구현하지 않은 상태이다.

 

위 코드에서는 아직 onButtonClick 함수에 인자를 전달하지 않은 상태이다.

state를 생성해서 currentIndex를 변수로 사용할 수 있게 하자.

 

이제 onButtonClick 함수 내에 있는 onSeletImage 함수를 구현할 차례이다.

onSelectImage는 scrollIntoView 메소드를 사용해서 캐러셀 메뉴를 움직이게 하는 동작을 할 것이다.

onSelectImage 함수는 인자로 전달받은 currentIndex를 curentImageIndex로 set하고

imageRef.current[currentIndex]에 있는 div로 스크롤을 이동(scrollIntoView의 동작)시킨다.

scrollntoView의 속성은 링크에서 확인할 수 있다.

 

캐러셀

 

캐러셀은 웹페이지에서 자주 사용되는 만큼 라이브러리를 찾아보면 금방 나온다.

직접 만드는 것보다는 만들어진 라이브러리를 사용하는 것이 시간적으로 효율적일 것 같다.

---

참고한 링크

https://youhavetosleep.dev/react-carousel/

React - Simple Carousel