교보문고 클론코딩 메인 리스트 캐러셀

 

기존 메인 리스트, 썸네일은 하드 코딩으로 되어 있었다.

 

이번에는 더미 데이터를 가지고 캐러셀을 구현을 해봤다.

 

 

 

만들면서 생겼던 에러 

 

버튼을 누르면 썸네일 리스트가 메인 리스트로 변경이 되게 하고 싶었는데,  

메인 리스트 부분에서 {books.slice(currentIndex,currentIndex + itemsPerPage).map((book) => 을 사용을 하면서 첫 번째 섬네일 이미지 옆에 메인 리스트 이미지가 나오게 됐다..

 

해결 방법 : 

li 태그에 키 값으로 단일 객체를 전달을 해서 해결을 했다. 

 

 

 

캐러셀 

useState를 사용을 해서 라이브러리 없이 구현을 해봤다. 

썸네일 리스트를 기준으로 버튼을 누르면, 메인 리스트로 출력이 되도록 구현을 했다.