[React] 리액트 다시4(+xeicon, slick사용)

리액트 다시4
+xeicon, slick사용

 

---

🔸책 추천🔸

소플 리액트(책)

노드/익스프레스

 

---

📌 리액트에 xeicon 넣기

basic.css에 폰트와 xeicon 추가하기

👉cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css

를 추가👇

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url(https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css);

 

---

📌 리액트에 슬릭 넣기

https://www.npmjs.com/package/react-slick 사이트에서(검색 react slick npm)

npm :
npm install react-slick --save 👈 1번으로 터미널에 복붙
npm install slick-carousel 👈 2번으로 터미널에 복붙

그리고 리액트에서 slick을 움직이려는 페이지에

import Slider(이름은 마음대로 해도 됨) from 'react-slick'; 👈 추가

slick을 돌리기 위해서 css가 필요하기 때문에

import "slick-carousel/slick/slick.css"; 👈 추가

import { useRef } from 'react';
import MainSlider(Slider 이름을 변경하는 경우, ✋가 표시된 부분도 바꿔줘야함) from 'react-slick';
import "slick-carousel/slick/slick.css";
const MainVisual = () => {
    const set = {
        dots: true,
    }

   const Ms = useRef(null)
    return (
        <div>
            <h3>나는 아이콘</h3>
            <i className="xi-bars"></i>

            👇 슬릭 부분
            <✋NainSlider {...set ✔ 위에서 선언한 setting을 넣어줘야함}>
                <figure>01</figure>
                <figure>02</figure>
                <figure>03</figure>
            </✋MainSlider>
            ☝ 슬릭 부분
            
            ✔ 화살표 추가
            <div className='arrows'> 
                <i className="xi-arrow-left" onClick={ 
                    () => ( 
                        // console.log(Ms.current : current를 붙이는 이유가 그냥 Ms만 했을 때, 콘솔에 current:slider라고 찍혀서 .current를 추가해줘야함) 
                        Ms.current.slickPrev() 
                    ) 
                }></i> 
                <i className="xi-arrow-right"></i> 
            </div>
        </div>
    )
}
export default MainVisual;

 

const Ms = useRef(null) 

 <MainSlider {...set} ref={Ms}>

 

🔵 slick 메소드 사용하기

1. slick 에다가 이름을 붙여준다. useRef --> 소환하려면 이름.current를 달아준다.

2. 클릭하는 요소에 이벤트를 직접 달아준다.

 

📌 제이쿼리에서 $('.slide') =~~ 이부분이 리액트에서는

const Ms(임의 이름) = useRef(null) 로 사용

 

📌 화살표 함수 // 괄호 생략 가능 & return 생략 가능

( e ) => {

return  e

}

(e) => (e, v) 또는  e => e도 가능

 

 

import Slider from 'react-slick';
import "slick-carousel/slick/slick.css";
const SyncSlick = () => {
    return (
        <>
            <Slider dots={true} 이렇게 slick-dot를 추가할 수 있음>
                <div>A</div>
                <div>B</div>
                <div>C</div>
            </Slider>
        </>
    )
}
export default SyncSlick;