React-slick 슬라이드 깜빡거리는 문제 해결 방법

React-Slick 라이브러리를 이용하여 자동으로 넘어가는 슬라이드를 생성했다.
근데 슬라이드가 한 사이클을 돌고, 다시 1페이지로 돌아왔을때 깜빡거리는 현상이 발생했다.

아래의 간단한 방법을 통해 해당 현상을 해결했다.

1. 슬라이드 컴포넌트에서 settings 부분에 아래 내용을 추가한다.

useTransform: false

-> 이 설정이 깜빡거림 문제를 해결하는 데 도움이 되었다.
useTransform는 일부 브라우저에서 하드웨어 가속을 사용하는지 여부를 결정하는 옵션으로, 특정 상황에서 깜빡거림과 관련이 있을 수 있다고 한다.

2. 슬라이드 컴포넌트를 사용하는 부모 컴포넌트의 css파일에 아래 내용을 추가한다.

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition-delay: 10ms;
}

-> 슬라이드 컴포넌트를 사용하는 부모 컴포넌트의 CSS에서 transform 관련 속성을 설정하여, 슬라이드의 트랜스폼에 대한 처리를 강제로 지정하는 것인데, translate3d(0, 0, 0)은 GPU 가속을 강제할 수 있다고 한다.