Age of Discovery

https://jurgen-94.tistory.com/91 [React] - 라이브러리 없이 무한 슬라이드 구현 (1) 프로젝트 하면서 맡게 된 캐러셀 기능을 라이브러리없이 구현해보자! 내가 원하는 기능들은 1. 하단 동그라미 클릭시 해당 이미지로 움직이기 2. 좌우 Arrow버튼으로 이미지 슬라이드 3. 약 3초마 jurgen-94.tistory.com 이전에 했던 포스팅에 이어 이제는 실제로 함수를 만들고 동작시켜보자. useEffect훅에 handleOriginSlide가 있기 때문에 handleOriginSlide 함수먼저 살펴보자 function handleOriginSlide(index: number): void { setTimeout(() => { setNum(index); setCarous..

프로젝트 하면서 맡게 된 캐러셀 기능을 라이브러리없이 구현해보자! 내가 원하는 기능들은 1. 좌우 Arrow버튼으로 이미지 슬라이드 2. 약 3초마다 자동 슬라이드 3. 무한 슬라이드 이정도라고 할 수 있겠다. 코드를 한줄씩 파헤쳐보자 const imageBox = useRef(null); 우리가 만들 캐러셀의 사진배열들을 보관하는 div 컨테이너에 imageBox라는 변수명의 useRef를 지정해준다. 타입스크립트를 사용했기 때문에 useRef가 지정될 Dom타입을 붙여준다. const [num, setNum] = useState(1); 현재 구현하려는 기능의 핵심중의 핵심이다. 이 state를 어떻게 갖고노느냐에 따라 이미지를 좌우자재로 이동시킨다. const [carouselTransition, s..