[REACT] 라이브러리 이용하기 1. react-scroll_ 스크롤시 해당 컨텐츠로 이동!

결과물 👆

스틸컷을 누르면(잘 안보이지만 눌렀다ㅋㅋ) 스틸컷이 나오는 부분으로 이동

페이지가 변하는게 아닌,
해당 컨텐츠가 있는곳으로 페이지 이동하는기능 라이브러리로 가능!!

---

라이브러리 이름 🏷

react-scroll

라이브러리 사용 gogo 👩🏻‍💻

1. 터미널로 설치
$ npm install react-scroll


2. import 해주기
⚠️ Router Link 말고 scroll 용 Link import 해주기!
import { Link } from 'react-scroll/modules'; (✔️)
import { Link } from 'react-router-dom'; (❌)


3. 네비게이션용 컴포넌트 혹은 태그에 Link 걸어주기

<Link to="1"> // 누르면 같은 id값이 1인 컴포넌트 / 태그로 갈 수 있게.

💡속성설명
smooth : 부드럽게 이동하게하기
duration : 이동하는데 걸리는 시간 설정



4. 도착지에 Link to 에 걸어줬던 id 값 지정해주기
Link to="1" 이었던 태그를 누르면 영화줄거리로,Link to="2" 는 스틸컷 부분으로.

---

캐러셀 라이브러리보다 훨씬 간단하다 다행.... 앞으로 자주써야지!!!😍