모달창
모달 창 외부를 클릭했을때 모달 창이 닫히게 만들어주자
이는 useRef를 활용하면된다.
useRef
특정 DOM을 선택할 때 사용하는 React Hooks
원래..JS에서는..
- getElementById, querySelector 같은 DOM Selector 함수를 사용하여 DOM 선택
React에서는..!
- ref를 이용
-> 클래스 컴포넌트 -> React.createRef
-> 함수형 컴포넌트 -> useRef
DOM을 직접 선택해야하는 경우들
- 엘리먼트 크기를 가져와야 할 때
- 스크롤바 위치를 가져와야 할 때
- 엘리먼트에 포커스를 설정 해줘야 할 때 등등...!
useRef 사용법
useRef()을 이용해서 Ref 객체를 만들고, 이 객체를 특정 돔에 ref값으로 설정하면 Ref객체의 .current 값이 특정 DOM을 가리키게 된다.
그러면 이제 만들어보자.
const outSection = useRef(); // 모달창 영역 밖에 해당하는 부분 useRef을 통해 선택outSection이란 변수에 useRef을 주고 이를 modal에 ref={}으로 주자.
이렇게 되면 Ref객체의 .current값이 모달을 가리키게 된다.
이제 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마우스 다운이 일어날때 이벤트 리스너를 추가하고
다시 돌려주기 위해서 return에도 넣어준다.
이때 ref와 handler를 받는데, handler는 모달(false)를 가지고 있다.
그러므로 useEffect훅스에서 handler()함수가 실행되면 모달창이 닫힌다는것이다.
그와 반대로 모달이 아니거나 클릭한 컨테인이 이벤트 타겟이 이라면
모달이 안닫히게 return한다.
이렇게 해서
//커스텀 훅 만들기
useOnClickOutside(outSection,()=>{setModalOpen(false)});커스텀 훅을 만들 수 있다.
Swiper
npm install swiper를 통해서 스와이퍼를 설치해준다.
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')}
>이제, 화면 크기별로 보이는 카드 갯수가 다르고, loop할 수 있게 됐다.
그리고
스타일링을 해주면
.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이제 package.json에
"homepage":"https://seochan99.github.io/React", 이런식으로 홈페이지 주소를 넣어주자
이제 배포를 위한 스크립트를 추가해주자.
"predeploy" : "npm run build",
"deploy" : "gh-pages -d build"이렇게 두줄을 추가한다
마지막으로 React dom의 기본 경로를 변경해주자
ReactDOM.render(
<BrowserRouter basename='React'>
<App />
</BrowserRouter>,
document.getElementById('root')
);이렇게 basename을 변경해주자.
build파일과 함께 publish가 되었다
그러면 이제
https://seochan99.github.io/React/
성공적으로 배포가 된것을 확인할 수 있다...!
