[React] Swiper.js 라이브러리 사용시 vertical fade 중첩 오류 해결하기

 

📕1. 문제 발생

 

사이드 프로젝트를 진행하면서 랜딩 페이지를 구현할 일이 있었는데,

초기에 내가 생각했던 방식은 5가지의 각 기능에 대한 설명을 Swipe 하면서 넘기는 방식이었다.

 

쉽게 구현하기 위해, 널리 잘 알려져있고 특화 프로젝트 때 사용해본 경험이 있는 라이브러리인

Swiper.js를 사용해서 랜딩 페이지를 구현하고자 했는데 Swipe를 할 때, 컴포넌트가 겹치는 오류가 발생했다.

 

오늘은 이 문제에 대해 같은 경험을 겪고 있는 사람들을 위해 해결 방법을 적어보려고 한다.

내가 겪은 문제는 아래와 같다.

 

 

 

내가 의도한 것은 위의 사진처럼

1번 ~ 5번 페이지를 각각 스와이프하는 방식이었는데,

1번 페이지는 잘 나타나는 것이 보이지만

2번 페이지는 이렇게 1번 페이지랑 겹치고

 

 

5번 페이지까지 스와이프를 하고 나면 위 사진처럼 기괴하게 겹치는 상황이 발생했다.

 

 

개발 초기에 테스트 코드로 작성한거라 좀 많이 부족해보이긴 하겠지만,

5번 페이지까지 스와이프를 하고나면 위 사진처럼 겹치는 현상이 발생했다.

 

 

 

 

 

 

📕 2. 문제 해결

 

 

이게 당시 내가 작성한 코드인데,

여기서 문제가 되는 부분은 effect = {'fade'} 이다.

 

이 부분을 제거해주거나 혹은

effect : 'fade', 
fadeEffect: { crossFade: true },

 

위와 같이 fadeEffect에 crossFade : true 옵션을 추가해주면 해결이 된다.

 

Swiper.js 공식문서에서도 보면 

crossFade 옵션은 true로 해야 뒤 혹은 아래에 있는 컨텐츠를 보지 않을 수 있다고 되어있다.

  

 

https://swiperjs.com/swiper-api#fade-effect

Swiper - The Most Modern Mobile Touch Slider

 

 

 

 

 

 

📕 3. 느낀 점

 

문제가 발생했을 당시 구글링을 했을 때,

생각보다 나와 같은 문제를 겪은 사람이 많지 않았고 그래서 찾는데 시간이 조금 걸렸다.

 

하지만 지금 생각해 보면 오류가 발생했을 때

처음부터 공식문서를 찾아봤으면 어땠을까? 하는 아쉬움이 남는다.

또 다른 아쉬운 점으로는 공식문서에서도 crossFade 옵션을 true로 해줘야 한다고 되어있다면

default가 true면 어땠을까? 하는 의문점이 있긴 하다.

이 부분에 대해서 아시는 분이 있다면 댓글로 알려주시면 감사하겠습니다 😊