React에서 카드의 가로 스크롤 구현
Vanilla JavaScript만으로 무엇이든 구축하는 것은 기술적으로 가능합니다. React와 같은 프레임워크는 핵심 JavaScript 언어에 구조를 추가하여 웹 애플리케이션을 쉽게 구축할 수 있도록 도와줍니다.
React에는 또한 사용자 지정 구성 요소를 만들고 모든 사람과 공유하는 대규모 개발자 커뮤니티가 있습니다.
React 커뮤니티의 개발자들은 React 앱에 필요할 수 있는 거의 모든 기능을 추가할 수 있는 많은 패키지를 만들었습니다. 작동 방식을 이해하지 않고도 이러한 사용자 지정 구성 요소를 사용할 수 있습니다.
이 기사에서는 React에서 가로로 스크롤 가능한 카드의 캐러셀을 만드는 방법에 대해 설명합니다.
가로 스크롤 카드 반응
가로로 스크롤 가능한 카드에 대한 사용자 지정 React 구성 요소를 만들 수 있습니다. 그러나 시간이 너무 오래 걸리고 기성 패키지만큼 작동하지 않을 수 있습니다.
이 기사에서는 react-spring-3d-carousel이라는 패키지를 사용합니다.
react-spring-3d-carousel 패키지에서 사용자 지정 Carousel 구성 요소를 가져와야 합니다. 이 구성 요소 덕분에 가로 스크롤 카드 구현이 매우 쉽습니다.
캐러셀에 표시되는 DOM 요소 목록을 제공하기만 하면 됩니다.
예를 들어 보겠습니다.
import "./styles.css";
import React, { Component } from "react";
import Carousel from "react-spring-3d-carousel";
import SampleCard from "./card";
import { config } from "react-spring";
class ExampleCarousel extends Component {
constructor(props) {
super(props);
this.state = {
changeSlide: ""
};
}
slides = [
{
key: 1,
content: <SampleCard />
},
{
key: 2,
content: <SampleCard />
},
{
key: 3,
content: <SampleCard />
},
{
key: 4,
content: <SampleCard />
},
{
key: 5,
content: <SampleCard />
},
{
key: 6,
content: <SampleCard />
},
{
key: 7,
content: <SampleCard />
},
{
key: 8,
content: <SampleCard />
}
].map((slide, index) => {
return { ...slide, onClick: () => this.setState({ changeSlide: index }) };
});
render() {
return (
<div style={{ width: "40%", height: "500px", margin: "0 auto" }}>
<Carousel
slides={this.slides}
changeSlide={this.state.changeSlide}
offsetRadius="10"
animationConfig={config.gentle}
showNavigation
/>
</div>
);
}
}
export default ExampleCarousel;
여기에 카드 목록(배열)이 있습니다. 목록의 각 개체에는 key 및 content라는 두 가지 속성이 있습니다.
key 속성의 값은 고유해야 합니다. content 속성 값이 캐러셀에 표시됩니다.
그런 다음 .map() 메서드를 적용하여 캐러셀의 각 카드에 대한 onClick() 이벤트 핸들러를 설정합니다. .map() 메서드는 slides 변수에 저장할 새로운 개체 배열을 생성합니다.
이 목록을 참조하여 JSX에서 캐러셀을 표시합니다.
<Carousel
slides={this.slides}
changeSlide={this.state.changeSlide}
animationConfig={config.gentle}
showNavigation
/>
먼저 slides 속성을 객체 배열로 설정합니다. 또한 changeSlide를 현재 초점이 맞춰진 카드의 현재 인덱스로 설정합니다.
또한 animationConfig 속성을 부드러운 전환으로 설정했습니다. 이는 react-spring 패키지에서 config 모듈을 가져왔기 때문에 가능합니다.
두루마리의 카드 목록
slides 속성에 저장된 카드 목록을 살펴보겠습니다.
slides = [
{
key: 1,
content: <SampleCard />
},
{
key: 2,
content: <SampleCard />
},
{
key: 3,
content: <SampleCard />
},
{
key: 4,
content: <SampleCard />
},
{
key: 5,
content: <SampleCard />
},
{
key: 6,
content: <SampleCard />
},
{
key: 7,
content: <SampleCard />
},
{
key: 8,
content: <SampleCard />
}
].map((slide, index) => {
return { ...slide, onClick: () => this.setState({ changeSlide: index }) };
});
슬라이드 목록의 각 개체에는 <SampleCard /> 구성 요소 값이 있는 content 속성이 있습니다. 캐러셀은 여기에서 지정한 콘텐츠의 수평 스크롤을 생성합니다.
예를 들어 정사각형 <div> 요소를 지정하면 캐러셀에 해당 요소가 표시됩니다.
또한 배열에서 각 개체의 콘텐츠 속성에 대해 서로 다른 구성 요소를 설정할 수 있으며 캐러셀은 서로 다른 카드를 표시합니다. 이 경우 배열의 모든 개체에 <SampleCard /> 구성 요소를 설정합니다.
또한 구성 요소에 소품을 전달하여 동작, 기능 및 모양을 사용자 정의할 수 있습니다. props의 가능한 사용 사례에 대해 알아보려면 공식 React 문서를 읽어보세요.
<SampleCard> 컴포넌트의 코드를 살펴보겠습니다.
const imageUrl =
'https://play-lh.googleusercontent.com/yPtnkXQAn6yEahOurxuYZL576FDXWn3CqewVcEWJsXlega_nSiavBvmaXwfTGktGlQ';
export default class SampleCard extends React.Component {
render = () => {
return (
<div>
<img src={imageUrl} height='150' width='150'></img>
<h1>Card title</h1>
</div>
);
};
}
이 CodeSandbox의 라이브 데모를 열면 이러한 카드의 가로 스크롤을 볼 수 있습니다. 이 카드의 구조는 매우 간단합니다. 이미지와 <h1> 텍스트가 있습니다.
이미지는 카드 이미지가 어떻게 보이는지 보여주는 예일 뿐입니다. imageUrl 변수를 다른 이미지에 대한 링크로 바꿀 수 있으며 변경 사항을 볼 수 있습니다.
SampleCard 구성 요소가 반환하는 기본 <div> 컨테이너에 요소와 스타일을 추가하여 더 복잡한 카드를 만듭니다.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn