Image Slider

!Generic badge

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

How to use

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

- npm | react-auto-image-slider

``
npm install react-auto-image-slider
`

In your react project

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

function App() {
return (











);
}

export default App;
`

$3

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

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

Features

- 버튼 컨트롤




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

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` 서브 폴더를 생성하고 파일을 분리하였습니다.