ダイスまど

モードウィンドウの外部をクリックした場合、モードウィンドウを閉じます
これはuserefを利用することができます.

useRef

特定DOM選択時に使用するRECT HOOK

もとは。JSでは...

DOMセレクタ関数(

getElementByIdやquerySelectorなど)を使用してDOM

を選択します.

Reactで…!

refの使用
->クラス構成部品->React.createRef
->関数構成部品->useref

手動でDOMを選択する必要がある場合

入力

Elliment大時間、入力

のスクロールバー位置を入力必要がある場合、

.

フォーカスを設定する必要があるときなど…!

userefの使用

useref()を使用してRefオブジェクトを作成し、そのオブジェクトを特定のドームのref値に設定すると、Refオブジェクトの.current値は、特定のDOMを指します.
では今から作りましょう

const outSection = useRef(); // 모달창 영역 밖에 해당하는 부분 useRef을 통해 선택

userefをoutSectionという変数に渡し、ref={}としてmodelに渡します.
これにより、Refオブジェクトが生成されます.現在の値はモードを指します.
これからCustom hooksを作りましょう

useOnClickOutside.js

import React, { useEffect } from 'react'

const useOnClickOutside=(ref,handler)=> {
    useEffect(() => {
        const listener = (event) =>{
            if(!ref.current || ref.current.contains(event.target)){
                return;
            }
            //모달밖이라면 
            handler();
        };
      document.addEventListener("mousedown",listener);
      document.addEventListener("touchstart",listener);
    
      return () => {
        document.addEventListener("mousedown",listener);
        document.addEventListener("touchstart",listener);
      }
    }, [])
    
}

export default useOnClickOutside

マウスを離すとイベントリスナーが追加されます.
返すために、返します.
このときrefとhandlerが受信され、handlerはモード(false)を有する.
したがって、userEffect hooksでhandler()関数を実行すると、モードウィンドウが閉じます.
逆に、モードでない場合やクリックした内容がイベントターゲットである場合は、
モデルは閉じないで戻ってきた.
このまま.

//커스텀 훅 만들기
    useOnClickOutside(outSection,()=>{setModalOpen(false)});

Custom Hookを作ることができます.

Swiper

npm install swiper

sweeperを設定します.

  import Swiper, { Navigation, Pagination } from 'swiper';
  // import Swiper and modules styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';

  // init Swiper:
  const swiper = new Swiper('.swiper', {
    // configure Swiper to use modules
    modules: [Navigation, Pagination],
    ...
  });

次に、モジュールをロードします.

 <Swiper
      // install Swiper modules
        modules={[Navigation, Pagination, Scrollbar, A11y]}
        spaceBetween={50}
        slidesPerView={5}
        navigation
        pagination={{ clickable: true }}
        scrollbar={{ draggable: true }}
        onSwiper={(swiper) => console.log(swiper)}
        onSlideChange={() => console.log('slide change')}
    >
        


            {/* <div
                className='slider__arrow-left'               
                onClick={()=>{ //스크롤 기능(완)
                        document.getElementById(id).scrollLeft -= window.innerWidth - 80;
                    }}>
                <span
                    className='arrow' 

                    >
                        {"<"}
                </span>
            </div> */}


            <div id={id} className="row__posters">
                {movies.map((movie) => (
                    <SwiperSlide>
                    
                    <img
                        key={movie.id}
                        className={`row__poster ${isLargeRow && "row__posterLarge"}`}
                        src={`https://image.tmdb.org/t/p/original/${isLargeRow ? movie.poster_path: movie.backdrop_path}`}
                        loading ="lazy"
                        alt={movie.name}
                        onClick={()=> handleClick(movie)}
                    />
                    </SwiperSlide>
                    ))}
            </div>

            {/* <div 
                className='slider__arrow-right'
                onClick={()=>{ //스크롤 기능(오)
                    document.getElementById(id).scrollLeft += window.innerWidth - 80;
                }}>
                <span 
                className='arrow'
                
                >{">"}</span>
            </div> */}
        </Swiper>

そして水かきで包みます
ワイパースライドはmap関数に入れて包むべきです.

スキャナーの内容を修正します.

        <Swiper
      // install Swiper modules
        modules={[Navigation, Pagination, Scrollbar, A11y]}
        navigation
        pagination={{ clickable: true }}
        loop={true} //끝에 갔을때 돌아오기
        breakpoints={{ //크기별로 다르게 주기 
            1378:{
                slidesPerView:6,
                slidesPerGroup:6,
            },
            998: {
                slidesPerView:5,
                slidesPerGroup:5,
            },
            625: {
                slidesPerView:4,
                slidesPerGroup:4,
            },
            0:{
                slidesPerView:3,
                slidesPerGroup:3,
            }
        }}
        
        onSlideChange={() => console.log('slide change')}
    >

画面サイズによってグラフィックスの数が異なり、リサイクルできるようになりました.
まだあります.
彼女に造形をしてあげると.

.swiper-pagination{
    text-align: right !important;
}
.swiper-pagination-bullet{
    background: gray !important;
}

.swiper-pagination-bullet-active{
    background: white !important;
}
.swiper-button-prev, .swiper-button-next{
    color: white !important;
}

.swiper-button-prev:after, .swiper-button-next:after{
    font-size: 1.3rem !important;
    font-weight: 600;
}

出てきたのはきれいですね!!

Githubの導入

導入前にapiキーを環境変数として使用します.
api_key:process.env.REACT_APP_MOVIE_DB_API_KEY
以前はそうしていましたenvファイルを開き、環境変数をファイルに配置します.
そして楽譜にアップして、今
gh-pagesモジュールのインストール

npm install gh-pages --save-dev

今はパッケージjsonで

"homepage":"https://seochan99.github.io/React", 

このようにホームページアドレスを追加します
デプロイメントにスクリプトを追加します.

"predeploy" : "npm run build",
    "deploy" : "gh-pages -d build"

このように2行加算する
最後にreact domのデフォルトパスを変更します

ReactDOM.render(
  <BrowserRouter basename='React'>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

このままbasenameを変更しましょう

ビルドファイルとともに公開されました
では今.
https://seochan99.github.io/React/
導入が成功したことを確認できます...!