[ISSUE]

Dev_min·2020년 6월 17일
0

ISSUE

목록 보기
1/3

Issue

: 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를 반환한다.
profile
TIL record

0개의 댓글