[React] react-slick 사용시 옵션 적용이 안될 때
date
Mar 9, 2023
slug
react-slick-사용시-옵션-적용이-안될-때
category
Dev
status
Public
tags
Next.js
Front-end
React
keywords
summary
next.js, react 환경에서 react-slick으로 슬라이드 구현하려는데 row가 안바뀔 때
type
Post
Last updated
Mar 10, 2023 01:17 AM
Created time
Mar 10, 2023 12:58 AM
현재 상황
// ...import
const SlideWrapper: React.FC = ({ children }) => {
const settings = {
arrows: false,
rows: 3,
slidesPerRow: 2,
// ...
}
return (
<Slider
{...settings}
>
{children}
</Slider>
)
}
const Item = () => {
return (
<div>label</div>
)
}
const Component = () => {
const items = [1, 2]
return (
<SlideWrapper>
{items.map((item) => (<Item key={item} />))}
</SlideWrapper>
)
}위와 같이 react-slick의 children을 부모로부터 map으로 돌려서 사용하면, settings로 넘겨준 옵션들이 적용되지 않는 현상이 있다.
삽질
next.js로 ssr 가능하게 구현해서 그런가?
→ dynamic import로 csr되도록 해봤지만 똑같았다.
불필요한 css가 오버라이딩 되었나?
→ 개발자 도구로 확인해본 결과 그런 속성은 부여되지 않았다.
음.. 뭐때문일까? codesandbox에서 기초 예제에서 여러가지 시도해보자
→ react-slick 하위로 <div /> 등 블록을 바로 사용하지 않고, 특정 컴포넌트를 반복문을 통해 배열로 넘겨주면 재현되었다.
// 재현 x
<Slider>
{[
<div />,
<div />
]}
</Slider>
// 재현 o
<Slider>
{
[1, 2].map(() => (<Component key={key} />))}
}
</Slider>원인
원인은 바로 react-slick의 속성 부여 원리에 있었다.
react-slick은 내부적으로 속성에 대해 children에게 필요로하는 props를 부여하는데, 별도로 컴포넌트를 정의해서 map을 돌리면 react-slick에서 의도한 props 전달이 되지 않기 때문
해결
위 코드를 기준으로 아래와 같이 수정하면 정상적으로 옵션이 잘 적용된다.
<Slider>
{
[1, 2].map((key) => (
<div key={key}>
<Component />
</div>
)}
}
</Slider>참고 자료
