- 웹 버전 당근마켓에서 이것 저것 물건들을 구경하던 중, 사진들을 화살표나 아래에 상태 바를 눌러 차례 차례 보는 것이 깔끔해보여 구글링해보았다.
- 검색 결과 "캐러셀"이라는 용어로 불리더라(처음엔 슬라이드로 검색했었다..)
- 직접 구현하는 것도 가능하지만, 리엑트 라이브러리로도 구현이 가능하여 찾아보니 많은 종류가 있지만, react-slick, react-responsive-carousel 이 두 가지를 많이 쓰더라.(당근마켓같은 경우 react-slick을 사용)
- react-responsive-carousel 라이브러리가 가장 자료가 많기 때문에 해당 라이브러리를 선택했다.(처음 사용하는 것이기 때문에 참고할 학습 자료가 많은 것을 선택했다.) 아래 문서를 보며 구현했다.
https://morioh.com/p/e1effe342241 - Carousel 태그로 사진목록을 감싸주는 형태로 구현할 수 있다. 그리고 화살표의 유무나 상태바 등 취향에 맞게 속성들을 지정해줄 수 있다. (아래 문서 참고)
https://www.npmjs.com/package/react-responsive-carousel?ref=morioh.com&utm_source=morioh.com - 나같은 경우엔 위 문서에 나오는 속성들을 이용하여 thumbs와 상태바, 화살표를 지우고 selectedItem 속성에 사진 배열의 index 상태를 부여했다.
- 기본적으로 제공되는 화살표 스타일이 맘에 들지 않아 직접 아이콘을 넣기 위해서였다.
- import되는 css파일을 수정해볼까 했지만, node_modules를 직접 수정하는건 권장하지 않는다고 한다.
- 아래 자료에서 보면, willedanielsson 라는 분이 위와 같은 방법으로 진행한 것을 보고 힌트를 얻은 것이다. 이 분도 나와 마찬가지로 화살표, 상태바, thumbs를 모두 지우고 직접 아이콘을 넣고 onClick 이벤트를 지정해주었다.
https://github.com/leandrowd/react-responsive-carousel/issues/354
꾸준한 기록