react-slick에서 발생하는 Infinity 경고 해결하기

에러 내용

'react-slick' 라이브러리를 사용하면서 다음과 같은 경고 메세지를 만났습니다.

Warning: `Infinity` is an invalid value for the `width` css style property.

해석해보면 react-slick 컴포넌트가 Infinity라는 유효하지 않은 값을 width CSS 스타일 속성에 적용하여 발생한다고 합니다.
처음에는 css 속성 중에 값이 잘못들어가는게 있지 않을까해서 열심히 찾아서 width 속성을 제거해보았는데, 에러 경고창은 없어지지 않았습니다.

원인 파악

힌트는 'Infinity'에 있었습니다. React Slick은 슬라이더의 각 프레임마다 넓이를 '부모 컨테이너의 너비' / '자식 요소들의 길이'로 주고 있었습니다.

이때 자식 요소의 배열의 길이가 0이면 넓이가 Infinity가 됩니다.
즉 Slider의 자식이 없는 경우, 해당 에러가 발생할 수 있음을 유추했습니다.
코드를 살펴보니 다음과 같은 코드가 있었습니다.

<Slider {...settings}>
  {items.length > 0 &&
	items.map((item, index) => 
	 <Item contents={item} key={index}/>
   )}
</Slider>

슬라이더의 자식 요소에서 쓰이는 items 배열의 길이가 0인 경우에는 Slider의 자식 요소는 존재하지 않게 됩니다. 따라서 자식 요소의 넓이 값을 0으로 나누게 되어 Infinity가 되는 것이었습니다.

해결 방법

슬라이더의 자식 요소가 존재하지 않는 경우에는, Slider 자체를 렌더링하지 않게 변경하기로 했습니다.
따라서 다음과 같이 수정하였습니다.

{items.length > 0 &&
  <Slider {...settings}>
    {
  	  items.map((item, index) => 
  	   <Item contents={item} key={index}/>
     )}
  </Slider>
}

반드시 items 배열의 길이가 0 이상일때만 Slider 요소가 렌더링 되도록 변경하였습니다.