[React] 학습 - day6
이미지 슬라이더
이번에는 저번에 만들었던 슬라이더 클래스의 역할을 CarouselContainer
컴포넌트가 하게 되고 해당 state나 함수를 받는 Carousel
컴포넌트는 화면에 보여주는 역할을 하게 된다.
React로 작성하면서 기존의 Vanilla js와 다르게 position
이라는 state 값만을 이용하여 슬라이드 이미지
, 점
그리고 좌우 버튼의 painiting 여부
를 조절하였다.
function CarouselContainer({ imgList }) {
const [position, setPosition] = useState(0);
const imgTotalWidth = imgList.length * 100;
function moveSlider(type) {
const handleType = { prev: -100, next: 100 };
let curPosition = position + handleType[type];
const isMinMaxSlider = pos => pos >= imgTotalWidth || pos < 0;
if (isMinMaxSlider(curPosition)) curPosition = type === 'prev' ? 0 : imgTotalWidth - 100;
setPosition(curPosition);
}
function handleSlider(e) {
if (e.target.name.includes('prev') || e.target.name.includes('next')) {
moveSlider(e.target.name);
}
}
return (
<Carousel
imgList={imgList}
imgTotalWidth={imgTotalWidth}
position={position}
handleSlider={handleSlider}
/>
);
}
function Carousel({ imgList, position, imgTotalWidth, handleSlider }) {
return (
<div css={sliderContainer}>
<div css={sliderRow({ imgTotalWidth, position })}>
{imgList.map((img, idx) => (
<SliderCol key={idx} imgSrc={img} />
))}
</div>
<a name="prev" onClick={handleSlider} css={prevBtn({ position })}>
❮
</a>
<a name="next" onClick={handleSlider} css={nextBtn({ position, imgTotalWidth })}>
❯
</a>
<div css={dotRow}>
{imgList.map((img, idx) => (
<DotCol key={idx} idx={idx} position={position} />
))}
</div>
</div>
);
}
Author And Source
이 문제에 관하여([React] 학습 - day6), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jiseong/React-학습-day6저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)