[리액트] 캐러셀 구현

ekil·2022년 10월 25일
0

인프런 클론 코딩

목록 보기
1/1
post-thumbnail

캐러셀, 슬라이더, 스와이퍼 등으로 부르는, 이미지를 가로로 넘겨볼 수 있는 UI를 라이브러리 없이 구현해 본 내용을 정리해봅니다.

바닐라 자바스크립트로 구현할 때와 리액트로 구현할 때는 또 달랐기에 상세히 적어보겠습니다.

📌 사용한 것: React, CSS, FontAwesome
📌 프로젝트: 인프런 클론 코딩

💡 '캐러셀'로 부르고, 각 이미지들은 '캐러셀 아이템'이라 부르겠습니다.

언젠가 다시 캐러셀을 만들기 위해 이 글을 읽으러 온 미래의 나를 위한 note
✔️ 리스트 아이템들 중 하나만을 선택하는 동작을 위해선 state 값으로 인덱스 이용
✔️ 현재 보여줄 캐러셀 아이템을 변경하는 버튼을 누를 때마다 작동 중인 타이머 제거 후 새로 생성해줄 것

1. 캐러셀 구현 방식들

  1. transform 이용해 위치를 변경해주기

    ✔️ 캐러셀 아이템들을 담을 컨테이너를 만들고, 캐러셀 아이템들을 가로로 늘어놓은 뒤, 사용자에게 보여줄 지점의 위치를 변경해주는 방식

    💡 참고 자료: 코딩애플 채널 영상 (유튜브)

    📍 컨테이너

    • width 값을 캐러셀 아이템 개수 * 100vw로 지정
    • overflow: hidden 추가, 하나의 캐러셀 아이템만 보이도록
    • transform: translate(-100vw)와 같이 이동

    📍 캐러셀 아이템

    • width: 100vw
  2. z-index 이용해 제일 위에 놓이는 캐러셀 아이템을 변경해주기

    ✔️ 캐러셀 아이템들을 똑같은 위치에 쌓아놓은 뒤, 가장 위에 쌓일 캐러셀 아이템을 변경해주는 방식

    💡 참고 자료: 노마드코더 채널 영상 (유튜브)

    📍 컨테이너

    • position: relative

    📍 캐러셀 아이템

    • position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 0;
    • 사용자에게 보여줄 캐러셀 아이템만 z-index 값을 1로 변경
  3. opacity 이용해 사용자가 볼 수 있는 캐러셀 아이템을 변경해주기

    ✔️ 2번 방법과 같이 캐러셀 아이템들을 쌓아두고, 투명도를 변경해주는 방식

    💡 참고 자료: The Web School. 채널 영상 (유튜브)

    📍 캐러셀 아이템의 기본 opacity 값은 0, 사용자에게 보여줄 캐러셀 아이템은 opacity: 1

2. 구현한 기능들

  1. 자동 재생: 5초가 지나면 자동으로 다음 캐러셀 아이템으로 전환

  2. 일시정지 버튼: 재생 중일 경우, 일시정지 버튼을 클릭함으로써 자동 전환 정지시키기

  3. 재생 버튼: 일시정지 상태에서 재생 버튼 클릭하면 다시 5초 간격으로 자동 전환 시작

  4. 다음/이전 버튼: 클릭 시 다음/이전 캐러셀 아이템으로 전환

  5. 특정 캐러셀 아이템으로 바로 전환해주는 버튼

3. 기능 구현을 위한 코드 소개

z-index를 이용하는 2번 방법을 사용해 위의 기능들을 구현했습니다.

  1. 자동 재생

    📍 useState, useEffect, setTimeout, clearTimeout

    ⭐ 재생 상태에서 사용자가 다음/이전 또는 특정 캐러셀 아이템으로 전환 버튼 클릭 시, 새로 전환된 시점으로부터 5초 후 그 다음 캐러셀 아이템으로 자동으로 전환되어야 함

    ➡️ 기존에 작동 중이던 타이머를 제거해주지 않으면 여러 개의 타이머가 생성돼 5초에 하나씩 전환되지 않고, 더 자주 전환됨

    ⭐ 현재 작동 중인 타이머가 무엇인지 알고, 제거가 필요할 때 제거해주어야 함 ➡️ '현재 작동 중인 타이머'는 계속 변화할 것 ➡️ useState 이용

    const [currentTimerId, setCurrentTimerId] = useState(-1);
    // 타이머 아이디는 양의 정수, -1로 초기화
    
    const [currentSlide, setCurrentSlide] = useState(0);
    // 현재 보여줄 캐러셀 아이템의 인덱스
    
    const maxSlide = swiperContents.length - 1;
    // 현재 캐러셀 아이템이 가장 마지막 아이템이라면 다시 제일 첫 번째 아이템으로 돌아가야 하므로,
    // 마지막 캐러셀 아이템의 인덱스를 변수로 저장
    
    const rightArrowClickHandler = () => {
      setCurrentSlide(prevState => (prevState < maxSlide ? prevState + 1 : 0));
      clearTimeout(currentTimerId);
    };
    // 다음 캐러셀 아이템으로 전환해주는 함수
    // state 변경 함수(setState)에서 최신의 state 값에 의존해 값을 변경하므로, 인자로 previous state를 받음
    // 작동 중인 타이머 제거
    
    useEffect(() => {
      const timer = setTimeout(() => rightArrowClickHandler(), 5000);
      setCurrentTimerId(timer);
    }, [currentSlide]);
    // 5초 간격으로 rightArrowClickHandler 함수를 실행하도록 타이머 생성
    // setTimeout의 리턴 값인 타이머 아이디를 timer라는 변수에 저장
    // currentTimerId state를, timer 변수에 저장된 값으로 변경해줌
    // 현재 보여주고 있는 캐러셀 아이템의 인덱스가 변경될 때마다 위의 작업을 다시 실행하도록 함으로써,
    // 타이머가 여러 개 생성되는 것을 막음
  2. 일시정지 버튼, 재생 버튼

    📍 useState, clearTimeout

    ✔️ 재생 중인지를 저장하는 state 필요

    const [play, setPlay] = useState(true);
    // 자동 재생되는 것이 초기 상태이므로, true로 초기화
    
    const swipePlayHandler = () => {
      setPlay(!play);
      clearTimeout(currentTimerId);
    };
    // 재생 중일 땐 일시정지 버튼이, 정지 상태일 땐 재생 버튼이 필요
    // 버튼 클릭 시 기존의 play state가 true이면 false로, false이면 true로 바꿔줌
    // 현재 작동 중인 타이머를 제거
    // 위 함수가 실행되면 play state 값이 변경됨,
    // play state 값이 변경될 때마다 새 타이머를 만들도록 useEffect 코드 수정 필요

    💡 useEffect 코드에 play 관련 코드 추가

    useEffect(() => {
      if (play) {
        const timer = setTimeout(() => rightArrowClickHandler(), 5000);
        setCurrentTimerId(timer);
      }
    }, [currentSlide, play]);
    // play state 값이 true일 때만 자동 재생을 위한 타이머가 새로 생성되도록 함
    // play state 값이 변경될 때마다 이 side effect 코드를 실행하도록 의존성 배열에 play 추가

    swipePlayHandler 실행 시, play 값을 변경하고, 작동 중인 타이머를 제거함

    ➡️ play 값 변경으로 인해 useEffect 속 함수 실행, play 값이 true라면 자동 재생을 위한 새 타이머 생성, false라면 아무것도 하지 않음

    ✔️ JSX: 버튼 아이콘 처리는 삼항 연산자 이용

    <button type="button" onClick={swipePlayHandler}>
      <FontAwesomeIcon icon={play ? faPause : faPlay} />
    </button>
  3. 다음/이전 버튼

    // 다음 캐러셀 아이템으로 전환 버튼
    const rightArrowClickHandler = () => {
      setCurrentSlide(prevState => (prevState < maxSlide ? prevState + 1 : 0));
      clearTimeout(currentTimerId);
    };
    // 현재 캐러셀 아이템의 인덱스가 가장 마지막 캐러셀 아이템의 인덱스보다 작다면,
    // currentSlide state의 값을 현재 인덱스에 1을 더한, 다음 캐러셀 아이템의 인덱스로 바꿔주고,
    // 현재 캐러셀 아이템의 인덱스가 가장 마지막 캐러셀 아이템의 인덱스와 같다면,
    // currentSlide state의 값을 제일 첫 번째 인덱스인 0으로 바꿔줌
    // currentSlide state 값이 변경되면 useEffect의 함수가 다시 실행될 것이므로,
    // 현재 작동 중인 타이머를 삭제해줌 (useEffect 내부 함수에서 새 타이머 생성)
    
    // 이전 캐러셀 아이템으로 전환 버튼
    const leftArrowClickHandler = () => {
      setCurrentSlide(prevState => (prevState > 0 ? prevState - 1 : maxSlide));
      clearTimeout(currentTimerId);
    };
    // 현재 캐러셀 아이템의 인덱스가 제일 첫 번째 인덱스인 0보다 크다면,
    // currentSlide state의 값을 현재 인덱스에서 1을 뺀, 이전 캐러셀 아이템의 인덱스로 바꿔주고,
    // 현재 캐러셀 아이템의 인덱스가 제일 첫 번째 인덱스인 0이라면(=현재 캐러셀 아이템이 제일 첫 번째 캐러셀 아이템이라면),
    // currentSlide state의 값을 제일 마지막 인덱스로 바꿔줌
    // currentSlide state 값이 변경되면 useEffect의 함수가 다시 실행될 것이므로,
    // 현재 작동 중인 타이머를 삭제해줌 (useEffect 내부 함수에서 새 타이머 생성)

    ✔️ 다음 버튼에 click 이벤트 발생 시 rightArrowClickHandler 실행하고, 이전 버튼에 click 이벤트 발생 시 leftArrowClickHandler 실행하도록 코드 작성

  1. 특정 캐러셀 아이템으로 바로 전환해주는 버튼

인프런의 캐러셀은 캐러셀 아이템 아래에 특정 캐러셀 아이템을 바로 확인할 수 있도록 하는 버튼들이 있습니다.

예를 들어 'Top50' 버튼을 누르면 해당 키워드를 가진 캐러셀 아이템으로 전환되어 그 캐러셀 아이템을 볼 수 있습니다.

✔️ 자동 재생 상태에서 이 버튼 클릭 ➡️ 기존 타이머 삭제 후 새 타이머 생성, 전환한 캐러셀 아이템을 현재 아이템으로 바꾸고, 5초가 지나면, 전환된 캐러셀 아이템의 다음 아이템을 보여줘야 함!

저는 캐러셀 아이템을 배열 형태로 저장하고 map 메서드를 이용해 화면에 나타냈는데요.

버튼 클릭 시 currentSlide state의 값을 그 키워드를 가진 아이템의 인덱스로 바꾸기 위해서는 자신의 index 값을 알아야 했습니다.

그래서 특정 캐러셀 아이템으로 전환하기 위한 함수는 따로 정의해주지 않고, 자식 컴포넌트에게 전달하는 props로 바로 작성했습니다.

{swiperContents.map((content, index) => (
  <SwipePaginationButtons
    key={content.keyword}
    keyword={content.keyword}
    index={index}
    currentSlide={currentSlide}
    paginationButtonClickHandler={() => {
      setCurrentSlide(index);
      clearTimeout(currentTimerId);
    }}
  />
))}
// swiperContents는 캐러셀 아이템을 담은 배열
// SwipePaginationButtons는 캐러셀 아이템들의 키워드가 적힌 버튼을 만들어줄 자식 컴포넌트
// 자식 컴포넌트에서, button에 click 이벤트 발생 시 paginationButtonClickHandler 함수 실행하도록 작성
// currentSlide state 값을 클릭 이벤트가 발생한 자기 자신의 index로 변경
// 현재 작동 중인 타이머를 제거,
// currentSlide state 값이 변경됐으므로 useEffect 내부의 함수 재실행되며 새 타이머가 생성될 것

✔️ 각 캐러셀 아이템의 키워드를 담고 있는 버튼을 나타내주는 SwipePaginationButtons 컴포넌트에서, 자신의 index가 currentSlide state 값과 같다면 active 클래스를 부여해줌으로써 그 버튼이 선택됐음을 사용자에게 시각적으로 알려줌

4. 컴포넌트 소개

swipe 폴더를 만들고, 캐러셀 아이템들이 담긴 배열을 담은 .js 파일 1개와 4개의 컴포넌트를 추가했습니다.

  1. Swiper.jsx

    캐러셀을 그려줄 메인 컴포넌트입니다. 위에서 소개한 함수와 state들을 모두 여기서 정의했고, useEffect 코드도 이 컴포넌트에 작성했습니다.

    각 캐러셀 아이템을 그려내기 위해 자식 컴포넌트인 SwipeItem을 이용합니다.

    {swiperContents.map((content, index) => (
      <SwipeItem
        key={content.keyword}
        keyword={content.keyword}
        title={content.title}
        description={content.description}
        tag={content.tag}
        img={content.img}
        background={content.background}
        fontColor={content.fontColor}
        tagColor={content.tagColor}
        tagBackground={content.tagBackground}
        currentSlide={currentSlide}
        index={index}
      />
    ))}
    // swiperContents는 캐러셀 아이템들이 담긴 배열
    // SwipeItem 컴포넌트에서 필요한 것들을 props로 전달
    // currentSlide state의 값과 자기 자신의 index 값을 비교해 active 클래스를 부여하기 위해 이들도 props로 전달

    SwipeItem 컴포넌트에서 현재 캐러셀 아이템의 인덱스 값(currentSlide)과 자기 자신의 index 값을 비교할 수 있도록 currentSlideindex를 props로 전달합니다.

    다음으로 캐러셀 아이템을 전환하기 위한 버튼을 담은 UI를 그려내기 위해 자식 컴포넌트인 SwipePaginationIndex를 이용합니다.

    위와 같은 UI를 만들기 위한 컴포넌트입니다.

    현재 보고 있는 캐러셀 아이템이 몇 번째 아이템인지 알려주고, 이전/다음 캐러셀 아이템으로 전환하는 버튼과 자동 재생을 중지/다시 시작할 수 있는 버튼을 가지고 있습니다.

    SwipeItem 컴포넌트를 이용할 때와 달리 배열이 필요 없습니다.

    <SwipePaginationIndex
      length={swiperContents.length}
      currentSlide={currentSlide}
      play={play}
      rightArrowClickHandler={rightArrowClickHandler}
      leftArrowClickHandler={leftArrowClickHandler}
      swipePlayHandler={swipePlayHandler}
    />
    // 전체 아이템 개수와 현재 캐러셀 아이템의 인덱스를 전달
    // 자동 재생 상태인지 알 수 있는 play state를 전달
    // 이전/다음 버튼 클릭 시 실행할 함수 전달
    // 자동 재생을 켜고 끄기 위해 실행할 함수 전달

    마지막으로 특정 캐러셀 아이템으로 바로 전환하기 위한 버튼을 그려내기 위해 자식 컴포넌트인 SwipePaginationButtons를 이용합니다.

    {swiperContents.map((content, index) => (
      <SwipePaginationButtons
        key={content.keyword}
        keyword={content.keyword}
        index={index}
        currentSlide={currentSlide}
        paginationButtonClickHandler={() => {
          setCurrentSlide(index);
          clearTimeout(currentTimerId);
        }}
      />
    ))}
    // 이 코드는 3.4.에서 살펴본 것과 같음
  2. SwipeItem 컴포넌트

    부모 컴포넌트인 Swiper로부터 key, keyword, title, description, tag, img, background, fontColor, tagColor, tagBackground, currentSlide, index props를 전달 받습니다.

    a. 인라인 스타일 적용

    각 캐러셀 아이템은 거의 같은 생김새이지만, 배경 색깔이나 글자 색깔, 태그 색깔 등은 각자 다릅니다.

    자식 컴포넌트를 이용하면서도 각자 다른 스타일을 적용해주기 위해, SwipeItem 컴포넌트에서 적절한 요소에 인라인으로 스타일을 적용해줍니다.

    부모 컴포넌트로부터 받은 props 중 background, fontColor, tagColor, tagBackground를 이때 사용합니다.

    const backgroundStyle = { backgroundColor: background };
    const fontStyle = { color: fontColor };
    const tagStyle = {
      color: tagColor,
      backgroundColor: tagBackground,
    };

    예를 들어 이런 식으로 적용합니다.

    <div className='swipe-item' style={backgroundStyle}>...</div>

    styled-components를 배우고 적용하기 전이었는데, 일반 CSS를 이용해 각 캐러셀 아이템마다 다른 스타일을 적용하는 방법으로 인라인 스타일을 이용하는 것밖에 찾아내지 못했습니다. 만약 더 좋은 방법이 있거나, styled-components의 props를 이용해 더 간결한 코드를 작성할 수 있다면 수정하고자 합니다.

    현재는 styled-components를 이용해 각 캐러셀 아이템에 적용할 스타일 값을 받아올 방법이 명확하지 않고, 지금의 방식이 더 간결한 것으로 판단되어 그대로 두었습니다.

    b. 사용자에게 보여줄 캐러셀 아이템 선정하기

    currentSlide, index props를 이용합니다.

    <li
      className={`swipe-item-wrapper ${
        currentSlide === index ? 'swipe-item-active' : ''
      }`}
      key={keyword}>...</li>

    삼항 연산자를 이용해 currentSlide와 자기 자신의 index가 일치하는지 확인합니다.

    일치한다면 active 클래스를 추가하고, 그렇지 않다면 기존의 swipe-item-wrapper 클래스 하나만 갖도록 코드를 작성합니다.

    active 클래스가 추가되면, 요소의 z-index 값은 0에서 1로 바뀝니다.

    이에 따라 쌓여있는 캐러셀 아이템 중 가장 위에 렌더링되어, 사용자는 그 캐러셀 아이템만 볼 수 있게 됩니다.

    c. 그 외 props들

    위에서 언급하지 않은 props들을 이용해 캐러셀 아이템에서 보여줄 정보를 그려냅니다.

    아래 캐러셀 아이템을 예로 들어 이야기 해보겠습니다.

    tag로 '매월 업데이트!'를,
    title로 '무슨 강의 들을지 고민이라면? 현직자 Top 50 먼저 보기'를,
    description으로 '입문부터 실전까지! 믿고 보는 실무자 Pick'을 나타내고,
    img트로피가 그려진 이미지를 표시할 때 사용합니다.

    key는 리액트가 각 아이템(저는 <li> 태그를 이용했습니다.)이 서로 다른 요소임을 인지하기 위한 key를 전달할 때 사용하고,
    keyword트로피가 그려진 이미지의 대체 텍스트(alt)에 사용합니다.

  3. SwipePaginationIndex 컴포넌트

    a. 아이템 개수 나타내기

    캐러셀 아이템 개수를 나타내기 위해 length, currentSlide props를 이용합니다.

    <span>
      <span>{currentSlide + 1}</span>
      /
      <span>{length}</span>
    </span>

    currentSlide의 값은 인덱스여서 제일 첫 번째 값이 0입니다. 그러나 사람은 제일 첫 페이지를 1로 생각하는 것이 일반적이므로, currentSlide에 1을 더한 값을 사용합니다.

    만약 7개의 캐러셀 아이템을 가지고 있다면, 그 배열의 길이는 7입니다. 캐러셀 아이템의 순서를 1부터 매긴다면 마지막 캐러셀 아이템의 번호는 7이 됩니다. 따라서 캐러셀 아이템의 전체 개수는 배열의 길이를 저장하고 있는 length로 나타낼 수 있습니다.

    현재 캐러셀 아이템이 가장 첫 번째 아이템이고 전체 캐러셀 아이템의 개수가 7이라면, 위의 코드는 1/7을 그려내 줄 것입니다.

    b. 아이템 컨트롤 버튼 나타내기

    <div className="swipe-page-control-button-container">
      <button
        type="button"
        onClick={leftArrowClickHandler}>
        <FontAwesomeIcon icon={faChevronLeft} />
      </button>
      // 이전 캐러셀 아이템으로 전환해주는 버튼
      
      <button type="button" onClick={swipePlayHandler}>
        <FontAwesomeIcon icon={play ? faPause : faPlay} />
      </button>
      // 일시정지 및 재생을 위한 버튼
      
      <button
        type="button"
        onClick={rightArrowClickHandler}>
        <FontAwesomeIcon icon={faChevronRight} />
      </button>
      // 다음 캐러셀 아이템으로 전환해주는 버튼
    </div>
  4. SwipePaginationButtons 컴포넌트

    <li key={keyword} className={index === currentSlide ? 'active' : ''}>
      <button type="button" onClick={paginationButtonClickHandler}>
        {keyword}
      </button>
    </li>

    currentSlide 값과 자신의 index 값이 같다면 active 클래스를 추가함으로써, 글자와 테두리의 색상이 변하도록 합니다.

5. Bonus: 로드 중... 구현하기

이 캐러셀은 실제로 서버에서 데이터를 받아와 표현하는 게 아니라, .js 파일로 만든 더미 데이터를 이용합니다.

setTimeout을 사용해 실제로 데이터를 받아오는 것처럼 보이도록 약간의 지연 시간을 주고 '로드 중...'이란 글자를 먼저 보여주는 코드를 작성했습니다.

📍 useState, useEffect, setTimeout

const [slides, setSlides] = useState([]);
const [isLoading, setIsLoading] = useState(true);

slides라는 state를 만들고 빈 배열로 초기화합니다.

이 state에는 캐러셀 아이템 정보를 담은 배열을 담아줄 것입니다.

isLoading state는
slides state에 캐러셀 아이템 배열이 담길 때까지는 로드 중인 상태이므로 값을 true로 하고,
캐러셀 아이템 배열이 담긴 후에는 로드가 완료된 상태이므로 값을 false로 바꿔줄 것입니다.

useEffect(() => {
  const DELAY_TIME = 1000;

  setTimeout(() => {
    setSlides(swiperContents);
    setIsLoading(false);
  }, DELAY_TIME);
}, []);

처음 로드할 때(=컴포넌트가 mount될 때)만 실행할 side effect이므로 의존성 배열은 빈 배열입니다.

1초의 지연 시간을 두고, 1초가 지나면 slides state 값은 swiperContents(캐러셀 아이템이 담긴 배열)로, isLoading state 값은 false로 바꿔줍니다.

그리고 isLoading, slide state를 이용해 화면에 '로드 중...'과 캐러셀을 그려주기 위해 content라는 변수를 만들었습니다.

let content;

if (isLoading) {
// 로드 중 상태라면 content 변수는 '로드 중...'을 나타내는 화면이어야 함
  content = (
    <div style={{ width: '100vw' }}>
      <p
        style={{
          maxWidth: '75rem',
          width: '100%',
          height: '20rem',
          fontSize: '1.5rem',
          fontWeight: '700',
          color: 'gray',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          margin: '0 auto',
        }}>
        로드 중...
      </p>
    </div>
  );
} else {
// 로드가 끝나 isLoading state 값이 false가 됐다면 캐러셀 아이템 보여주면 됨
// 이때의 slides는 캐러셀 아이템 배열임
  content = slides.map((slide, index) => (
    <SwipeItem
      key={slide.keyword}
      keyword={slide.keyword}
      title={slide.title}
      description={slide.description}
      tag={slide.tag}
      img={slide.img}
      background={slide.background
      fontColor={slide.fontColor}
      tagColor={slide.tagColor}
      tagBackground={slide.tagBackground}
      currentSlide={currentSlide}
      index={index}
    />
  ));
}

그리고 '로드 중...'과 캐러셀 아이템을 보여줘야 할 자리에 {content}를 적어줍니다.

<ul className="swipe-items">{content}</ul>

6. 전체 코드 보기

긴 여정이 끝났습니다. 전체 코드를 추가합니다.

  1. 깃허브로 보기

    swipe 폴더

    css 파일

    ✔️ swipe 관련 스타일들: 56줄 ~ 245줄

    ✔️ SwipeItem 컴포넌트: 56줄부터

    ✔️ SwipePaginationIndex 컴포넌트: 144줄부터

    ✔️ Swiper 컴포넌트, SwipePaginationButtons 컴포넌트: 174줄부터

  2. VS Code 캡처 이미지로 보기

    ✔️ Swiper 컴포넌트

    (20줄 console.log는 글 작성하며 timer id 확인하려 추가한 코드이고, 캐러셀에는 전혀 필요 없습니다.)

    ✔️ SwipeItem 컴포넌트

    ✔️ SwipePaginationIndex 컴포넌트

    ✔️ SwipePaginationButtons 컴포넌트

    ✔️ css 파일

    (애니메이션 코드는 캐러셀 아이템을 마우스로 끌어 전환할 수 있도록 하려고 시도하다가 실패한 흔적입니다!)

7. 개선할 점

  1. 접근성 관련

    스크린 리더에서의 캐러셀은 어떤지에 대해 더 공부가 필요합니다.

    만약 스크린 리더를 사용할 때 캐러셀 자동 재생이 불편하다면, 스크린 리더로 이 페이지에 접속했을 땐 자동 재생이 꺼지도록 해야 할 것입니다.

  1. CSS 관련

    일반 CSS를 사용해 구현했는데, 다양한 CSS 라이브러리 중 이 캐러셀을 구현할 때 가장 장점이 많은 라이브러리를 이용하는 것으로 개선한다면 좋을 것 같습니다.

    이를 위해 CSS 라이브러리 공부가 필요합니다.

  2. 컴포넌트 관련

    컴포넌트의 핵심은 재사용성입니다.

    현재는 하나의 컴포넌트에 너무 많은 코드가 들어가지 않도록 눈에 보이는 단위별로 나누어 컴포넌트로 쪼갰습니다.

    지금은 이것이 가장 합리적인 방식이라고 생각하지만, 더 나은 방법이 있다면 개선하고자 합니다.

    또 컴포넌트 작명에 아쉬움이 남습니다. SwipePaginationIndex, SwipePaginationButtons는 이름만 보고는 뭐가 어떤 역할을 하는 것인지 헷갈리기도 했습니다.

  3. 캐러셀 아이템을 마우스로 끌어서 전환

    인프런 실제 사이트는 캐러셀 아이템을 마우스로 꾸욱 눌러 왼쪽으로 움직이면 다음 아이템을 보여줍니다.

    이 기능을 애니메이션을 통해 구현하려 했으나, 아직까지 성공하지 못했습니다.

    이것을 구현하는 방법을 찾아 추가하고 싶습니다.

간결하면서도 알차게 적으려 노력했습니다.

velog에 올리는 저의 첫 글은 여기서 마무리하도록 하겠습니다. ☺️

profile
좋아하는 일을 잘함으로써 먹고살고 싶은 프론트엔드 개발자입니다.

0개의 댓글