9월20일83일차(1) - react swiper버튼, a대신 Link쓰는 이유

리액트 Link 컴포넌트
리액트에서 페이지를 이동할 때는 <a> 태그의 href 대신 Link를 사용합니다.
<a> 태그의 href는 페이지를 새로 불러오기 때문에 새로운 데이터를 렌더링해주게 됩니다.
Link 컴포넌트는 브라우저의 주소를 이동하지만 페이지를 새로 렌더링하지 않습니다.

Link는 to 태그를 이용합니다.
  <Link to={slide.link}>

 

리액트 Swiper dots 구현하기
Swiper 컴포넌트에 ref를 주었습니다.
ref는 태그이름.current로 해당 태그에 접근할 수 있습니다.
react Swiper에서 dots기능을 구현하려면 ref를 이용해 MSG.current.swiper.slideTo() 속성을 이용합니다.
            <ul className="dots">
                {SLIDE.map((dot, idx) => (
                    <li
                        className={num === idx ? "on" : ""}
                        onClick={() => MSG.current.swiper.slideTo(idx + 1)}
                    >
                        {dot.id}
                    </li>
                ))}
            </ul>




리액트 Swiper arrows 구현하기
<button onClick={() => MSG.current.swiper.slidePrev()}>뒤로가기</button>
<button onClick={() => MSG.current.swiper.slideNext()}>앞으로가기</button>