React.js에서 대화형 캐러셀을 구축하는 방법

당신과 같은 독자는 MUO를 지원하는 데 도움이 됩니다. 귀하가 당사 사이트의 링크를 사용하여 구매하면 당사는 제휴 수수료를 받을 수 있습니다. 자세히 알아보기

React.js는 사용자 인터페이스를 만들기 위한 대중적이고 강력한 JavaScript 라이브러리입니다. 이를 사용하여 동적, 대화형 및 반응형 웹 애플리케이션을 구축할 수 있습니다.

React.js와 함께 사용할 수 있는 일반적인 구성 요소 중 하나는 캐러셀입니다. 내장된 React 기능을 사용하거나 타사 라이브러리를 사용하여 쉽게 수행할 수 있습니다.

오늘의 메이크업 비디오

회전 목마 란 무엇이며 용도는 무엇입니까?

캐러셀은 이미지나 비디오를 순환할 수 있는 슬라이드쇼 구성 요소입니다. 웹 사이트에서 제품이나 서비스를 보여주거나 추천 콘텐츠를 보여주기 위해 가장 일반적으로 사용됩니다. 캐러셀을 사용하면 다음과 같은 많은 이점이 있습니다.

중요한 콘텐츠에 주의를 집중시키는 효과적인 방법입니다.
여러 이미지와 동영상을 보여줄 수 있는 좋은 방법입니다.
페이지를 구성하고 시각적으로 매력적으로 유지하는 데 도움이 됩니다.
이를 사용하여 대화형 사용자 경험을 만들 수 있습니다.

React.js에서 캐러셀을 만드는 방법

React.js에서 캐러셀을 만드는 것은 상대적으로 쉽고 사용할 수 있는 두 가지 인기 있는 라이브러리가 있습니다. 내장된 React 기능을 사용하여 캐러셀을 추가할 수도 있습니다.

내장 기능 사용

React.js에서 캐러셀을 만드는 첫 번째 방법은 내장 기능을 사용하는 것입니다. React는 구성 요소를 사용하여 캐러셀을 만드는 강력한 방법을 제공합니다. 당신은 할 수 있습니다 반응 후크 사용 캐러셀을 추가하고 제어합니다.

import React, { useState } from 'react'; 
 
const Carousel = () => { 
 const [index, setIndex] = useState(0);  
 const length = 3; 
 
 const handlePrevious = () => { 
 const newIndex = index - 1; 
 setIndex(newIndex < 0 ? length - 1 : newIndex); 
 }; 
 
 const handleNext = () => { 
 const newIndex = index + 1; 
 setIndex(newIndex >= length ? 0 : newIndex); 
 }; 
 
 return ( 
 <div className="carousel"> 
 <button onClick={handlePrevious}>Previous</button> 
 <button onClick={handleNext}>Next</button> 
 <p>{index}</p> 
 </div> 
 ); 
}; 
 
export default Carousel;

이 코드는 useState 후크를 사용하여 index라는 상태 변수를 생성합니다. 이렇게 하면 캐러셀에서 현재 위치를 추적할 수 있습니다.

handlePrevious 및 handleNext 함수는 사용자가 이전의 그리고 다음 버튼.

게임 다운로드를 더 빠르게 하는 방법

마지막으로 마크업은 단락 태그에 인덱스 값을 표시합니다. 원하는 경우 텍스트 대신 이미지나 동영상을 표시할 수 있습니다. 일반 CSS 또는 Tailwind CSS와 같은 CSS 프레임워크 사용 .

멋진 스타일이 없으면 기본 버튼 쌍과 현재 인덱스를 나타내는 숫자가 표시됩니다.

pure-react-carousel 라이브러리 사용

React.js에서 캐러셀을 만드는 두 번째 방법은 pure-react-carousel 라이브러리입니다. 이 라이브러리는 구성 요소를 사용하여 캐러셀을 만드는 강력한 방법을 제공합니다. 라이브러리를 사용하려면 먼저 다음 명령을 사용하여 라이브러리를 설치해야 합니다.

npm install pure-react-carousel

라이브러리를 설치하면 구성 요소를 사용하여 캐러셀을 만들 수 있습니다. 다음은 Carousel 구성요소를 사용하는 방법의 예입니다.

import React from 'react'; 
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel'; 
import 'pure-react-carousel/dist/react-carousel.es.css'; 
 
const Carousel = () => { 
 return (  
 <CarouselProvider 
 naturalSlideWidth={100} 
 naturalSlideHeight={120} 
 totalSlides={3} 
 > 
 <Slider> 
 <Slide index={0}>Slide 1</Slide> 
 <Slide index={1}>Slide 2</Slide> 
 <Slide index={2}>Slide 3</Slide> 
 </Slider> 
 <ButtonBack>Back</ButtonBack> 
 <ButtonNext>Next</ButtonNext> 
 </CarouselProvider> 
 ); 
}; 
 
export default Carousel;

이 코드에서 CarouselProvider 구성 요소가 naturalSlideWidth, naturalSlideHeight 및 totalSlides와 같은 캐러셀의 일반 설정을 정의하는 것을 볼 수 있습니다.

Slider 구성 요소에는 여러 Slide 인스턴스가 포함되어 있습니다. 슬라이드 구성 요소는 각각의 개별 슬라이드를 정의합니다.

마지막으로 ButtonBack 및 ButtonNext 구성 요소는 캐러셀 탐색을 처리합니다.

pure-react-carousel 라이브러리를 사용하면 다음과 같은 많은 이점이 있습니다.

사용하기 쉬운: 기본 제공 방법은 캐러셀을 만드는 데 더 많은 코드가 필요하지만 라이브러리는 React.js에서 캐러셀을 만드는 더 쉬운 방법을 제공합니다.
반응형: 라이브러리는 반응형 캐러셀을 만드는 기능을 제공합니다. 기본 제공 방법을 사용하면 다양한 화면 크기에 대해 별도의 캐러셀을 만들어야 합니다.
맞춤화: 라이브러리는 자동 재생, 탐색 화살표, 페이지 매김 등과 같은 캐러셀을 사용자 지정하는 데 사용할 수 있는 많은 기능을 제공합니다.

react-responsive-carousel 라이브러리 사용

React.js에서 캐러셀을 만드는 마지막 방법은 react-responsive-carousel 라이브러리입니다. 이 라이브러리를 사용하면 구성 요소를 사용하여 캐러셀을 만들 수 있습니다. 라이브러리를 사용하려면 먼저 다음 명령을 사용하여 라이브러리를 설치해야 합니다.

npm install react-responsive-carousel

라이브러리를 설치하면 구성 요소를 사용하여 캐러셀을 만들 수 있습니다. 다음은 Carousel 구성요소를 사용하는 방법의 예입니다.

import React from 'react'; 
import { Carousel } from 'react-responsive-carousel'; 
import 'react-responsive-carousel/lib/styles/carousel.min.css'; 
 
const CarouselPage = () => { 
 return (  
 <Carousel> 
 <div> 
 <img src="https://placehold.co/100x100" /> 
 <p className="legend">Legend 1</p> 
 </div> 
 <div> 
 <img src="https://placehold.co/200x200" /> 
 <p className="legend">Legend 2</p> 
 </div> 
 <div> 
 <img src="https://placehold.co/300x300" /> 
 <p className="legend">Legend 3</p> 
 </div> 
 </Carousel> 
 ); 
}; 
 
export default CarouselPage;

이 코드에서 Carousel 구성 요소가 carousel을 정의하는 것을 볼 수 있습니다. Carousel 구성 요소 내에서 div에는 각 개별 슬라이드가 포함되어 있습니다. 각 슬라이드에는 이미지와 해당 이미지에 대한 범례가 포함될 수 있습니다. 라이브러리는 또한 캐러셀을 사용자 지정하는 데 사용할 수 있는 다양한 옵션과 설정을 제공합니다.

react-responsive-carousel 라이브러리를 사용하면 다음과 같은 많은 이점이 있습니다.

가장 인기 있는 라이브러리 중 하나: 이 라이브러리는 React.js에서 캐러셀을 만드는 데 가장 많이 사용되는 라이브러리 중 하나입니다. 따라서 문제가 발생하면 커뮤니티에서 쉽게 도움을 찾을 수 있습니다.
사용하기 쉬운: 몇 줄의 코드만으로 캐러셀을 쉽게 만들 수 있습니다.
반응형: 라이브러리는 반응형 캐러셀을 만드는 기능을 제공합니다.
맞춤화: 또한 라이브러리는 캐러셀을 사용자 지정하고 스타일을 지정하는 데 사용할 수 있는 많은 기능을 제공합니다.

캐러셀로 사용자 경험 개선

캐러셀을 사용하면 사용자에게 더 많은 정보를 제공하고 사용자가 웹사이트와 더 쉽게 상호작용하도록 도울 수 있습니다. 캐러셀은 또한 페이지를 체계적이고 시각적으로 매력적으로 유지하는 데 도움이 됩니다. 결과적으로 사용자 경험을 향상시키는 좋은 방법입니다.

또한 캐러셀과의 사용자 상호 작용을 추적하고 데이터를 사용하여 사용자 경험을 최적화할 수 있습니다. 이렇게 하면 웹사이트에서 더 나은 사용자 경험을 만드는 데 도움이 됩니다. 그런 다음 쉽고 비용 효율적인 Github 페이지와 같은 플랫폼에 React 애플리케이션을 무료로 배포할 수 있습니다.