: react-swipeable-views
를 이용한 이미지 전환 기능을 구현하는 중 키보드를 이용하여 이미지 전환시 없는 index번호의 이미지인데도 빈 <span>
태그를 생성하여 무한 이미지 전환이 이루어지는 에러가 발생했다.
import SwipeableViews from "react-swipeable-views";
import { virtualize, bindKeyboard } from "react-swipeable-views-utils";
const VirtualizeSwipeableViews = bindKeyboard(virtualize(SwipeableViews));
{/*...*/}
renderThumb = (params) => {
const { index, key } = params;
const { thumbs, theme, classes, selectedThumbIdx } = this.props;
const value = Math.abs(index) % thumbs.list.length; // 에러 수정 코드
return thumbs.list[value] ? (
<div
dir={theme.direction}
key={key}
className={cn(
classes.thumbContainer,
selectedThumbIdx === index ? classes.outline : null
)}
onClick={(e) => this.handleThumbClick(e, index)}
>
<img
src={thumbs.list[value]}
alt="thumb"
draggable="false"
className={classes.thumb}
/>
</div>
) : (
<span key={key} />
);
};
{/*...*/}
<VirtualizeSwipeableViews
index={selectedThumbIdx}
onChangeIndex={this.handleChangeIndex.bind(this)}
slideRenderer={this.renderThumb}
style={style.root}
slideStyle={style.slideContainer}
/>
console.log를 통해 확인해 보니 키보드로 전환시 index번호는 끝없이 증가하는 것을 확인하였고, 그로 인해 이미지 배열의 길이보다도 넘는 index번호가 생성되고, 생성후 접근하니 이미지 url이 없기 때문에 빈
<span>
태그를 생성하는 것이였다.
그래서, 이미지 배열의 갯수만큼의 index 번호를 반환하는 코드를 추가해주었다.const value = Math.abs(index) % thumbs.list.length; // thumbs.list 는 이미지 url이 존재하는 배열이다. // Math.abs() 메서드를 사용한 이유는 index가 음수로도 들어오는 것이 확인되었기 때문에 사용하였다. // thumbs.list.length로 나눈 나머지를 이용하여 thumbs.list에 해당하는 index에만 접근할 수 있는 index를 반환한다.