안녕하세요
9월13일78일차 - 리액트 슬릭 본문
public 폴더의 index.html에서 필요한 것만 남겨줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>현대엘리베이터</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
img를 넣는 방법입니다.
App.js
function App() {
return (
<div className="App">
<h1>리액트</h1>
<img src={process.env.PUBLIC_URL + "/assets/img/logo.png"} alt="" />
</div>
);
}
또는 css 백그라운드를 이용합니다.
h1 {
background: url(../public/assets/img/logo.png);
}
reset은 index.css에 붙여넣습니다.
forEach와 map함수의 차이
forEach()
아무 값도 반환하지 않습니다. = 리턴값이 없습니다. = undefined를 반환합니다.
기존의 배열을 변경합니다.
map()
리턴값이 있습니다.
새로운 배열을 반환합니다.
리액트슬릭 만드는 방법
1. 설치
npm install react-slick --save
npm install slick-carousel
2. import
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
3. Slider
<Slider dots={true} arrows={false}>
<li>01</li>
<li>02</li>
<li>03</li>
</Slider>
const MainVisual = () => {
const [IDX, setIDX] = useState();
useEffect(() => {
setIDX(0);
}, []);
const setting = {
arrows: false,
dots: true,
afterChange: (index) => setIDX(index),
autoplay: true,
autoplaySpeed: 5000,
fade: true,
};
return (
<section className="MainVisual">
<Slider {...setting}>
<figure className="itm01">
<div className="inner">
<h2>{SLIDE[0].content}</h2>
</div>
</figure>
{SLIDE.map((slide, idx) => {
return (
<figure
key={slide.id}
className={
"itm0" + slide.id + (idx === IDX ? " on" : "")
}
>
<div className="inner">
<h2>{slide.content}</h2>
<p>{slide.desc}</p>
<a href="slide.link" target="_blank">
VIEW MORE
</a>
</div>
</figure>
);
})}
</Slider>
</section>
);
};
슬릭 깜빡이 문제 해결방법
.MainVisual .slick-track,
.MainVisual .slick-slide {
transition-duration: 5ms;
}
'프론트엔드 국비교육' 카테고리의 다른 글
| 9월16일81일차 - 유튜브 전환 버튼 만들기 (0) | 2022.09.16 |
|---|---|
| 9월15일80일차 - 리액트 슬릭 useRef로 버튼만들기 (0) | 2022.09.15 |
| 9월08일77일차 - 리액트 슬릭 슬라이더 (0) | 2022.09.08 |
| 9월07일76일차 - 깃허브로 리액트 배포, 다단메뉴, 토글 (0) | 2022.09.07 |
| 화면을 덮는 팝업창 + 쿠키 만들기 (0) | 2022.09.05 |