Image Slider

React auto 이미지 슬라이드 컴포넌트

How to use

터미널의 명령어를 실행하여 설치 후 사용할 수 있도록 npm으로 배포되었습니다.

• npm | react-auto-image-slider

npm install react-auto-image-slider

In your react project

import ImageSlider, { Slide } from "react-auto-image-slider";

function App() {
  return (
    <ImageSlider effectDelay={500} autoPlayDelay={2000}>
      <Slide>
        <img alt="img2" src="landscape.jpg" />
      </Slide>
      <Slide>
        <img alt="img2" src="landscape2.JPG" />
      </Slide>
      <Slide>
        <img alt="img1" src="landscape.JPG" />
      </Slide>
    </ImageSlider>
  );
}

export default App;

Options(component props)

effectDelay 화면 전환 효과 딜레이 시간 설정(ms)

autoPlayDelay 자동 슬라이드 전환 시간 설정(ms)

Features

• 버튼 컨트롤 뒤로가기, 앞으로가기 버튼을 클릭하여 슬라이드를 컨트롤 할 수 있습니다.

• 오토 슬라이드 오토 슬라이드 기능을 제공합니다. 마우스 커서가 이미지에 위치하면 슬라이드 기능이 일시 정지되고, 영역을 벗어나면 다시 활성화 됩니다.

• 반응형 반응형을 지원합니다. 윈도우 크기에 맞춰 이미지 사이즈가 조정됩니다.

• 인디케이터 이미지 순서를 확인할 수 있는 인디케이터를 제공합니다. (슬라이드가 10개 이하일 경우 원형 인티케이터, 10개 초과일 경우 숫자로 표시)

• 최소 이미지 갯수 슬라이드는 최소 1개 이상이어야합니다. 최대 갯수는 제한이 없습니다.

⚠️ Requirement

최신 Chrome Browser 사용을 권장합니다.

Skills

Client

• React
• ReactDOM
• typescript
• styled-components

Test

• Testing Library

Information

uuid(사용한 라이브러리)

indicator 컴포넌트에서 array의 map 메서드를 사용하여 여러 개의 indicator를 렌더링하는 로직을 작성하였습니다. 이때 고유한 key값 생성을 위해 uuid 라이브러리를 사용했습니다.

컴포넌트 최적화

작은 단위의 컴포넌트와 로직으로 구성된 패키지이기 때문에 컴포넌트에 문제가 발생하는 경우는 없었습니다. 하지만 현재 보여지고 있는 슬라이드가 변경될 때마다 Slide컴포넌트를 리렌더링하게 된다면 비효율적일 것 같아 모든 Slide를 X축으로 길게 배치해둔 다음 useRef를 사용해서 current의 X축의 위치를 조정하는 방식으로 렌더링 횟수를 줄였습니다. 또한, useCallback을 사용하여 불필요한 함수의 재생성을 막고 함수를 재사용할 수 있도록 구성하였습니다.

관심사 분리

관심사를 분리하여 폴더 구조 및 파일을 생성하였습니다.

Button관련 ButtonBox.tsx 파일, Indicator관련 Indicator.tsx, Error 컴포넌트인 NoChildError.tsx로 파일을 분리하여 관심사별로 작업하였습니다.

src폴더 안에 components, utils(helper 함수), test 서브 폴더를 생성하고 파일을 분리하였습니다.