[CaseStudy] 리액트 함수형 슬라이드 구현하기 ,스타일컴포넌트

슬라이드 구현을 자바스크립트에서 , 리액트 클래스형, 함수형까지 모두 작업해보았다. 이쯤되면 슬라이드는 웹페이지를 개발시 필수 기능인것 같다.

물론 라이브러리를 사용하고 싶었지만 여태 경험삼아 라이브러리 없이도 도전할수 있을것 같아서 없이 도전해보았다.

오늘의 기능은 큰 광고 배너 슬라이더가 아니고 리스트 타입을 한장씩 넘기는 기능을 구현하게 되었다.

함수형 컴포넌트를 사용하면서 스타일 컴포넌트까지 사용하였는데 스타일 컴포넌트에서 함수형인 TranslateX() 안에 도저히 props => props 형식으로 넣을수가 없어서 인라인 태그 형식으로 기능 구현에 성공했다.

필요한 html형식은 ul또는 div 타입 안에 li를 넣어두는 것.
li를 많이 만들고 나서 overflow:hidden값과 flex-wrap:no-wrap값을 준다. flex-wrap:no-wrap은 가로로 쭉 나열하는 것
overflow:hidden은 가로로 쭉 나열했을때 부모태그의 넓이 값 이상이면 값을
가리는 것이다.

움직일 li들 옆에 onclick함수를 구현하게할 화살표를 만들어 준다.

함수형은 useState를 사용할수 있기 때문에 값들을 계속 수정해줄수 있다.
그래서 초기값은 0으로 설정해두고 화살표를 누를때마다 이동하고 싶은 원하는 값들을 더해줄 것이다.
그러므로 코드를 이런 형식으로 작성해준다.

const [moveSlide, setMoveSlide] = useState(0);

const PressArrowBtn = Number => {
    setMoveSlide(moveSlide + Number);
  };

함수에서 버튼에서 함수 실행시 매개변수 number(이동하고 싶은 값)을 초기값에 더하고 빼주면서 값을 관리해준다.

onClick={() => PressArrowBtn(+270)}

버튼 태그에서 onclick함수를 실행할때 원하는 만큼 이동하도록 값을 설정해주고 관리를 해준다. 왼쪽은 더하고 오른쪽 화살표는 빼고 하면서 누를때마다 값을 변환 시킬수 있다.

그다음 부모 태그 안의 li 태그 안에 스타일을 정해준다.

style={{ transform: `translateX(${props.moveSlide}px)` }}

나는 270px로 줄것이기 때문에 백틱 을 사용하여서 작성하였고 전달받은 state값으로 계속 관리를 해주었다.

그러면 버튼을 클릭하면 이런식으로 이동이 가능하다.

코드 공개는 대외비라서 나중에 가능하면 올려보도록 하겠다.