[React] useState 를 이용한 초간단 슬라이더

useState 만을 사용한 초간단 기본 슬라이더 이다.
디자인은 따로 적용하지 않은 상태라 추후에 기능을 더하며 추가할 예정이다.

Slider.js 부터 살펴보자

import React, {useState} from 'react';
import { Container, IconButton } from '@material-ui/core';

userState 를 사용할것으로 import 해주고, 최소한의 디자인? 을 위하여 marterial-ui 도 import 해줬다.

marterial-ui 를 사용할것이라면 아래의 코드로 install 받으면 된다.

 npm install @material-ui/core

다시 코드로 돌아가서,

const TOTAL_SLIDES = 2;
const Slider = () => {
    const [currentSlide, setCurrentSlide] = useState(0);
    const [ImageNum, setImageNum] = useState(1);

const nextSlide = () => {
    if (currentSlide === TOTAL_SLIDES) {
        alert('마지막 페이지 입니다');
    } else if (currentSlide >= TOTAL_SLIDES) {
        setCurrentSlide(0);
        setImageNum(1)
    } else {
        setCurrentSlide( currentSlide + 1);
        setImageNum (ImageNum + 1);
    }
};
const prevSlide = () => {
    if (currentSlide === TOTAL_SLIDES) {
        setCurrentSlide(currentSlide - 1);
        setImageNum (2);
    } else if( currentSlide === 1 ) {
        setCurrentSlide(currentSlide - 1);
        setImageNum(1)
    } else if (currentSlide === 0 ) {
        alert('첫번째 페이지 입니다.')
    } 
};

1.총 3개의 사진을 사용하니까 총 갯수를 정의해줬다.
2. ustState 를 첫번째 사진으로 지정.
3.다음슬라이드와 이전슬라이드 의 이벤트를 위한 함수

return (
        <Container>
            현재 페이지 :{currentSlide}
            <Container>
                <img src={require(`../assets/images/${ImageNum}.png`).default} style={{width:'100%'}}/>
                {/* <Slide img={img1}></Slide> */}
            </Container>
            <IconButton onClick={prevSlide}>이전</IconButton>
            <IconButton onClick={nextSlide}>다음</IconButton>
        </Container>
    );
    
export default Slider;

주의할점

처음에는 이미지의 경로값을 지정해서

const Image = '../assets/images/' +ImageNum+'.png';

위와 같이 하면 될줄알았는데 화면에 나오지 않았다. 아마 위의 경로가 컴파일 된 경로가 아니기때문인거같다.

그래서 찾은 방법이

<img src={require(`../assets/images/${ImageNum}.png`).default} style={{width:'100%'}}/>

위의 방법이였다.

마지막으로 App.js 에서 불러주면 적용 완료.

function App() {
  return (
    <div className="App">
      <Slider></Slider>
    </div>
  );
}

주의
리액트 공부용 프로젝트 이기 때문에 실 프로젝트에 사용하려면 더 수정해야할 부분이 많아보인다...ㅎ 일단 간단한 기능 구현에만 맞춰서 코드를 짯기 때문에
이미지가 많거나 사용할 이미지 파일이 따로 있을경우 는 다른 방법으로 시도하는걸 추천한다.