[ React ] PJ. ライブラリイメージのないスライドの実装

まず。

この文章をアップロードしたきっかけを簡単に述べると、プロジェクトで私が担当している部分にログインページがあり、ボタンや自動スライドを同時に体現する計画です.
別に難点はない.だから楽に考えました...
まだ始まっていないうちにブロッキングの問題が発生しました
今回のプロジェクト.

라이브러리 및 custom hook 사용 금지.. 
뭐..?

冒頭はここまでで本題に戻る

ライブラリとカスタムフックを使用しないでスライドを実装

1.ボタンスライド

ボタンは自動スライドとともに実装された機能に適用されるため、難易度を考慮してボタンスライドを優先的に実装する.
最初の最上位構成部品のステータス
すなわち、ステータスを管理するために、ログインページにusStateを使用して2つのステータス値が作成され、生成されたステータス値がpropsに渡されてスライド実装が開始される.

は、Effect Hookおよびfetch関数を使用して、画像APIおよびMockデータを呼び出す.

// 슬라이드 컴포넌트로 props 전달 

const Landing = () => {
  const [imgList, setImgList] = useState({});

  useEffect(() => {
    fetch(' ip, mock data 경로 ')
      .then(res => res.json())
      .then(data => {
        setImgList(data);
      });
  }, [setImgList]);

  return (
   ...
          <Slider swiperList={imgList.landings} />
   ...

スライドの画像は、swiperDataコンポーネントを作成し、mapメソッドを使用してコンポーネントを再使用することで実現されます.

画像を展開して表示する以外は、オーバーフロー-x:hiddenを表示して非表示にします.

styleのtransformプロパティを使用して、画像をリストするタグ部分にtranslateX値を割り当てます.

translate Xの値は次のとおりです.- ( 이미지 width 값 ) * ( 이미지배열의 index state 값 ) pxと入力してステータス値を変更すると、画像はその幅でスライド、左側に移動し、-が指定されている場合は右に移動します.

イベント関数で条件文を使用します.配列のインデックス状態が配列の長さと同じである場合、配列の最初のインデックスに移動します.逆も同様です.

const Slider = ({ swiperList }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  function handleSlide(currentIndex) {
    if (currentIndex === swiperList.length) {
      currentIndex = 0;
    } else if (currentIndex < 0) {
      currentIndex = swiperList.length - 1;
    }
    setCurrentIndex(currentIndex);
  }

  function handleSwipe(direction) {
    handleSlide(currentIndex + direction);
  }
  
  ...

ボタンをコンポーネント化して再使用し、異なるイベント値を2つのボタンに渡して、各ボタンのクリック時の左右移動を実現します.

各ボタンに異なるdirection値を設定してpropsに渡し、受信した値に基づいてstyleプロパティを同じ構成部品に割り当てます.

  return (
        ...
        <SliderButton direction="Prev" onClick={() => handleSwipe(-1)} />
        <SliderButton direction="Next" onClick={() => handleSwipe(1)} />
        ...
    
    
    // 아래는 버튼 컴포넌트 내용

import './SliderButton.scss';

export default function SlideButton({ direction, onClick }) {
  return <button onClick={onClick} className={`btn${direction}`} />;
}

ボタンを配置:絶対属性とz-index属性を提供し、上部設定の位置に固定します.

// SliderButton style 값

@mixin btn {
  z-index: 100;
}

// 각각 전달된 direction 값에 따라 style 값 변경 

.btnPrev {
  position: absolute;
  left: 0%;
  top: 45%;
  @include btn;
}

.btnNext {
  position: absolute;
  right: 0;
  top: 45%;
  @include btn;
}

の最後のプロパティはtransion-durationであり、画像のスライド時間を増やすことでスムーズなスライドを実現する.

2.自動スライド

論理が長くなるにつれて、スライド部分はSlider構成部品を作成することによって実現されます.

ボタンスライドなどのコンポーネントで実装されるため、APIまたはMockデータを個別に呼び出す必要はありません.

同じタグのstyleを使用するため、画像のスライド部分も変更されません.

スライド画像もボタンスライドで行い、mapメソッドを使用してリストされるため、保持されます.

userEffectを使用してログインページをレンダリングするときにsettimeoutメソッドを実行します.

  useEffect(() => {
    const timeoutId = setTimeout(
      () =>
        setCurrentIndex(currentValue => {
          if (currentValue < swiperList.length - 1) {
            return setCurrentIndex(currentIndex + 1);
          } else {
            return setCurrentIndex(0);
          }
        }),
      2500
    );
    return () => clearTimeout(timeoutId);
  });

settimeoutメソッドを使用して、画像配列のindex state値を変更し、条件文で画像をスライドさせます.

画像配列のインデックス状態値が画像配列の(length-1)値より小さい場合は、ステータス値を1に追加して書き込むスライド式に、小さくない場合はステータス値を0に変更してスライド式に書き込む.

スライドを停止および移動するには、2.5秒を割り当てます.

戻り値にcleartimeoutを割り当てて、スライドの繰り返し実行を実現します.

せいちょうてん

まず、前の記事でスライドがライブラリを使用していると述べたとき、このロジック自体はかなり歪んでいるか面倒だと思いますので、直接作成するのではなく、それを使用します.
思い出すと自動スライドとあまり差がないのがタイマーです.
タイマーは設定された時間で表示されているので、私が欲しい自動スライドも設定された時間で一時停止したり移動したりしていると思いますので、タイマー作成のロジックを探しました.
その中心はsettimeoutとsetIntervalで、使用する内容を検索しました.
settimeout:一定時間後に関数を実行
setInterval:一定の時間間隔で関数を実行する
このように簡単に整理した後、settimeoutを使って画像スライドを実現すべきだと思います.
しかし、settimeoutを使うために、多くの文章やビデオを閲覧したが、setIntervalとsettimeoutを混同した.
だから私はとても簡単なタイマーを作って理解しました.

하지만 나만의 로직을 그려서 구현하는 것이 정말 어려웠다. 

「自動スライド」という目標だけに注目し、実装を完了しようとするのは難しい.
だから「ボタンスライド」も実現して、まず難易度の低いものから実施して、骨格を作って、ゆっくりと肉を貼って、努力して、最終的に自分の論理で自動スライドを実現しました.
実装中に自動スライドが表示されます.
この時、どう考えているかがわかったようだ.
自動スライドを実現するのは難しいことではありませんが、ライブラリやカスタムフックを使用して自動スライドを実現する記事はどこにもありません.

< 응애.. >

まだまだ成長中の私にとっては、難易度は高いですが、すぐに興奮してここまで来て、最終的に完成しました.ほほほ
もちろん、一部の人にとって、これは何が難しいですか?そう思うけど.
私にはたくさんの時間を感じることができました^.^

TMI..를 하나 말하자면 오늘은 몇년전 내 입대날이다..ㅎ 
몇년 안되었지만 생각 자체가 180 도 바뀌게 되었고, 
건강한 마인드셋을 가지고 살다보니 추구하던 방향을 삶을 살게되는 내가 놀랍고 신기하다. 
앞으로도 지금처럼만 꾸준하고 생산성있게 성장 하고싶다. 

さあ。最後~

< 개똥이는 오늘도 성장한다 ~ ! >