[react]オプティカル(光学式)ドライブの転送時にスケールが一致しない問題を解決

ケース

前述したように、useEffectを用いてキャッシュユニットが実現され、次のボタン、前のボタンのクリック時にスキップが完了する.
でもみんなが見ているように尾がちょっと違う

useEffect(() => {
    slideRef.current.style.transition = 'all 0.5s ease-in-out';
    console.log('currentSlide: ' + currentSlide);
    //slideRef.current.style.transform = `translateX(-51.5%)`; // 이 되어야 함 (슬라이드 사진 6개 경우)
    slideRef.current.style.transform = `translateX(-${currentSlide * 5}0%)`;
  }, [currentSlide]);

解決方法1

このコードの翻訳XはtranslateX(-${currentSlide * 5}0%)で、currentSlideを使って5をしてもだめで、6をしても間違っています.
一時的に-51.5%を与えるのはちょうど良くて、どのように与えるべきなことを考えて、slideValueaのこの値にあげて、TranslatXに値を割り当てる前に先に計算する方法!

useEffect(() => {
    let slideValue = currentSlide * 5 * 10;
    if (currentSlide > 0) {
      slideValue += 1.5;
    }
    slideRef.current.style.transition = 'all 0.5s ease-in-out';
    slideRef.current.style.transform = `translateX(-${slideValue}%)`;
  }, [currentSlide]);

解決策2

もう一つの方法は、デザインを少し修正することです.margin値をすべてCarrocellBoxに入れて、異なる値を与える方法がありますが、少し曖昧なので、上の方法を選びました!

<Location>
     <Tag margin='0 4rem 0 0'></Tag>
</Location>

// margin-right를 3rem 으로 변경
<Location>
     <Tag margin='0 3rem 0 0'></Tag>
</Location>

const TagBox = styled.div`
  width: 29rem;
  height: 40rem;
`

// width 크기를 0.5rem 더해줌
const TagBox = styled.div`
  width: 29.5rem;
  height: 40rem;
`

結果

完了!ほほほ