윈도우 창의 크기가 변할 때 마다 출력하는 그림 수 바꾸기

쇼핑몰 클론 코딩 중 윈도우 사이즈가 md 사이즈가 되면 보이는 상품의 수가 바뀌는 것을 똑같이 구현하고 싶었다

 

<Swiper scrollbar={{hide: false, size:1 }}
        slidesPerView={4}
        spaceBetween={30}
        centeredSlides={false}
        modules={[Scrollbar,Pagination]} className="mySwiper">
        
</Swiper>

여기서 slidesPerView 의 값을 수정해줘야한다

slidesPerView={window.innerWidth < 768 ? 2 : 4}

 

이렇게 하면 768px 이하일때 출력되는 사진 수가 2장으로 변경된다!

 

 

---

... 이렇게 바꿨지만 새로고침을 해줘야 출력되는 그림도 바뀐다

그럼 사이즈가 바뀔때마다 인식하게해서 출력하는 값도 바꿔주고 거기에 다시 재렌더링도 해줘야 하나보다

그래서 useEffect를 사용했다!

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth <= 640) {
        setSlidesPerView(1);
      } else if (window.innerWidth <= 1024) {
        setSlidesPerView(2);
      } else {
        setSlidesPerView(4);
      }
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

 

window.addEventListener('resize', handleResize) 를 사용해서 resize 될때마다 handleResize 함수가 출력되도록 해줬다.

그리고 useEffect 를 사용하여 handleResize함수가 출력될때마다 Swiper가 재렌더링되도록 만들었다.