Document - row.js(슬라이드 기능 추가)

📍document 란? 

https://developer.mozilla.org/ko/docs/Web/API/Document

Document - Web API | MDN

- document 객체는 window 객체의 소속이며 웹 페이지 그 자체를 의미 .

- docuemt.getElement :  웹 페이지에 존재하는 html 요소에 접근하고자 할 때 이용

 

📍scrollLeft

- 콘텐츠가 왼쪽 가장가지리에서 부터 스크롤 되는 픽셀 수를 가져오거나 설정 

 

button.onclick = () => {
  document.getElementById("container").scrollLeft += 20;
};

- 이렇게 적으면 왼쪽에서부터 20 씩 스크롤이 움직임 

 

📍innerwidth

 

 

 

 

📍 슬라이드 기능 추가하는 방법

 왼쪽 화살표  누르면 슬라이드 기능으로 영화를 주르륵 볼 수 있도록 

<div className="slider__arrow-left">
<span
className="arrow"
onClick={() => {
document.getElementById(id).scrollLeft -= window.innerWidth - 80;
}}
>
{"<"}
</span>
</div>

 

1. 직접 DOM 조작

document.getElementById(sliderId).scrollLeft -= window.innerWidth - 80;

  <FontAwesomeIcon
            icon={faChevronLeft}
            onClick={() => {
                document.getElementById(sliderId).scrollLeft -= window.innerWidth - 80;
            }}
          />

단점

• 유지보수성: 스크롤과 페이지 상태 업데이트를 분리하지 않기 때문에, 나중에 기능을 수정하거나 확장할 때 복잡해질 수 있습니다.
• 재사용성 부족: 이 방식은 스크롤 방향에 따라 다르게 처리해야 할 경우 코드를 여러 번 작성해야 할 수 있습니다.
• 상태 관리 부족: 페이지 상태를 업데이트하는 코드가 없기 때문에, 현재 페이지를 추적할 수 없습니다.

 

2. 함수로 추상화

const handleScroll = (direction) => {
  const itemListElement = document.getElementById(sliderId);
  const scrollAmount = window.innerWidth - 80;

  if (direction === 'left') {
    itemListElement.scrollLeft -= scrollAmount;
    setCurrentPage((prev) => Math.max(prev - 1, 0)); // 왼쪽으로 스크롤 시 페이지 감소
  } else {
    itemListElement.scrollLeft += scrollAmount;
    setCurrentPage((prev) => Math.min(prev + 1, Math.ceil(itemList.length / itemsPerPage) - 1)); // 오른쪽으로 스크롤 시 페이지 증가
  }
};

장점

• 구조화: 스크롤과 페이지 상태 업데이트를 하나의 함수로 묶어 코드가 더 구조적이고 명확해집니다.
• 유지보수성: 나중에 스크롤 기능을 확장하거나 수정할 때, 함수 내부의 로직만 수정하면 됩니다.
• 재사용성: 같은 로직을 여러 곳에서 사용할 수 있으며, 다양한 방향의 스크롤을 쉽게 처리할 수 있습니다.
• 상태 관리: 현재 페이지를 상태로 관리하므로, UI에 페이지 번호를 표시하거나 페이지 이동에 따른 로직을 쉽게 추가할 수 있습니다.

단점

• 약간의 복잡성: 처음에는 함수 정의가 필요하므로, 약간의 복잡성이 추가될 수 있습니다.

 

☑️  ID 설정

위와 같은 것이 한 페이지에 여러개 있을 수 있으므로 Id를 설정 해야함

const Row = ({ title,index}) => {....

// 슬라이드의 ID를 설정
  const sliderId = `itemSlider-${index}`;
// <ItemList id={sliderId} > 해주는 이유
  // document.getElementById(sliderId).scrollLeft += window.innerWidth - 80;
  //위에서 sliderId는 앞서 설정한 ItemList의 ID입니다. 이 코드는 ItemList 요소를 DOM에서 선택하는 역할을 합니다.
  //즉, ItemList를 스크롤하기 위한 참조를 가져오는 것입니다.
  // itemSlider-0, itemSlider-1이 됨 
  // 각 슬라이더가 다른 아이템 리스트를 참조하게 하여, 화살표 클릭 시 올바른 슬라이더가 스크롤되도록 합니다.
  // 만약 설정하지 않으면 아래에 있는 row를 눌렀는데 위애 row가 움직일 수 있음