Carousel Slider

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 React PairProgramming과제를 진행하며 회고를 정리하는 글이다.

- 현상

load event 발생 시 currentSlide 고정 되지 않는 현상

const handleLoad = e => {
    setOffsetWidth(e.target.offsetWidth);
    setCurrentSlide(currentSlide + 1);
  };

- 발견
state가 초기에 한 번 변경 되면 load event 처리를 하지 않기 위해 예외 처리 적용

const handleLoad = e => {
    if (offsetWidth > 0) return;

    setOffsetWidth(e.target.offsetWidth);
    setCurrentSlide(currentSlide + 1);
  };

    
- 배운점
setter함수에 인수로 값을 주었기 때문에 예외 처리를 하지 않으면 Load event가 마지막 호출 되었을 때 결과를 반환하기에 CurrentSlide가 1번으로 고정되지 않는 현상임을 깨달았다.

- 선언
항상 setter함수에 인자를 무엇을 주었는지 생각하자!