[react-swiper] 스와이퍼 범위가 무한히 늘어나는 버그 | 스크롤바가 무한히 늘어나는 원인 및 해결방법

요약

Swiper에서 각 슬라이드는 콘텐츠 높이에 따라 크기가 결정된다.

Swiper의 height 또는 width 값을 명시하지 않는다면 Swiper는 각 슬라이드의 콘텐츠에 높이|너비에 따라 크기가 결정된다.

따라서, 항상 Swiper의 높이 또는 너비값을 명시해야한다.

 

전체 답변

높이를 명시해야 버그가 발생하지 않는 이유는 다음과 같습니다:

1. **슬라이드의 크기 결정**: `Swiper`는 슬라이드의 높이를 콘텐츠에 따라 자동으로 조정합니다. 만약 슬라이드의 높이를 명시적으로 설정하지 않으면, 슬라이드는 기본적으로 콘텐츠의 높이에 맞춰지게 됩니다. 이 경우, 슬라이드의 콘텐츠가 화면보다 작으면 슬라이드의 높이가 작아지고, 그로 인해 스크롤바가 필요하게 됩니다.

2. **수직 스크롤의 필요성**: 수직 방향으로 슬라이드를 설정했을 때, 각 슬라이드의 높이가 화면의 전체 높이와 같지 않으면, 사용자가 스크롤할 수 있는 영역이 생깁니다. 슬라이드의 높이가 화면보다 작으면, 스크롤바가 나타나고, 사용자가 스크롤할 수 있는 공간이 늘어나게 됩니다. 이로 인해 스크롤바가 무한히 늘어나는 것처럼 보일 수 있습니다.

3. **고정된 높이의 필요성**: 슬라이드의 높이를 명시적으로 설정하면, `Swiper`는 각 슬라이드가 항상 같은 높이를 가지도록 보장합니다. 예를 들어, `height: 100vh`로 설정하면, 각 슬라이드는 화면의 전체 높이를 차지하게 되어 스크롤바가 필요하지 않게 됩니다. 이렇게 하면 슬라이드가 화면에 맞춰 고정되므로, 스크롤바가 무한히 늘어나는 문제를 방지할 수 있습니다.

결론적으로, 슬라이드의 높이를 명시적으로 설정함으로써, 슬라이드가 항상 일정한 높이를 가지게 되어 스크롤바가 불필요하게 늘어나는 현상을 방지할 수 있습니다.

 

버그의 원인은 `Swiper` 컴포넌트의 수직 방향 슬라이드 설정과 관련이 있습니다.

구체적으로 설명하자면:

1. **슬라이드 높이**: `Swiper`의 슬라이드가 수직 방향으로 설정되면, 각 슬라이드는 기본적으로 콘텐츠의 높이에 따라 크기가 결정됩니다. 만약 슬라이드의 높이가 충분히 설정되지 않으면, `Swiper`는 슬라이드의 높이를 자동으로 조정하려고 시도합니다. 이 경우, 슬라이드의 콘텐츠가 화면보다 작으면 스크롤바가 계속 늘어나는 현상이 발생할 수 있습니다.

2. **CSS 스타일**: `StyledSwiper`에서 `height: 100vh;`를 설정했지만, 각 `SwiperSlide`의 높이가 명시적으로 설정되지 않으면, 슬라이드의 콘텐츠에 따라 높이가 결정됩니다. 이로 인해 슬라이드가 화면보다 작아지면, 스크롤바가 필요 이상으로 늘어나는 문제가 발생합니다.

3. **스크롤바 동작**: 수직 방향으로 슬라이드를 설정했을 때, 슬라이드의 높이가 화면보다 작으면 스크롤바가 나타나게 됩니다. 이 스크롤바는 사용자가 스크롤할 수 있는 영역을 제공하지만, 슬라이드가 계속해서 추가되거나 높이가 조정되지 않으면 스크롤바가 무한히 늘어나는 것처럼 보일 수 있습니다.

결론적으로, 슬라이드의 높이를 명시적으로 설정하여 `Swiper`가 올바르게 작동하도록 해야 하며, 이를 통해 스크롤바의 비정상적인 동작을 방지할 수 있습니다.

 

현재 코드에서 `height`를 지정하지 않으면 무한히 늘어나는 이유는 다음과 같습니다:

1. **자동 높이 조정**: `Swiper` 컴포넌트는 기본적으로 슬라이드의 콘텐츠에 따라 높이를 자동으로 조정합니다. 만약 슬라이드의 콘텐츠가 화면보다 작거나, 슬라이드가 여러 개 있을 경우, `Swiper`는 각 슬라이드의 높이를 콘텐츠에 맞추려고 시도합니다. 이 과정에서 슬라이드의 높이가 충분히 설정되지 않으면, 스크롤바가 계속해서 나타나게 됩니다.

2. **수직 방향 슬라이드**: 슬라이드가 수직 방향으로 설정되면, 각 슬라이드의 높이가 화면의 전체 높이를 초과하지 않도록 조정되어야 합니다. 만약 슬라이드의 높이가 화면보다 작으면, 스크롤바가 나타나고 사용자가 스크롤할 수 있는 영역이 생깁니다. 이 경우, 슬라이드의 수가 많아질수록 스크롤바가 계속 늘어나는 현상이 발생할 수 있습니다.

3. **CSS의 기본 동작**: CSS에서 요소의 높이를 명시적으로 설정하지 않으면, 요소는 기본적으로 콘텐츠의 높이에 따라 크기가 결정됩니다. 따라서, 슬라이드의 콘텐츠가 적거나, 슬라이드가 화면에 맞지 않게 배치되면, 스크롤바가 필요 이상으로 늘어나는 문제가 발생합니다.

결론적으로, 슬라이드의 높이를 명시적으로 설정하지 않으면, `Swiper`가 슬라이드의 콘텐츠에 따라 높이를 조정하면서 스크롤바가 무한히 늘어나는 현상이 발생하게 됩니다. 이를 방지하기 위해서는 슬라이드의 높이를 명확히 지정해 주어야 합니다.