Router
그동안 사용한 페이지 이동 => a태그
a태그의 문제점?
- html새로 불러오면서 다시그림. 화면 깜빡
- 우리가 배우는 react는 sap환경 즉.하나의 html
그럼 조건부렌더링으로 페이지 바꾸면안되나? => 놉
- 뒤로가기 앞으로가기 동작 ㄴ
- 새로고침시 최초 렌더링메인 이동
- 특정 url 접속 ㄴㄴ
- 페이지별 즐찾도 불가
=> 우리가 사용할 것: Router
React Router
routing: 사용자가 요청한 url에 따라 알맞은 페이지를 보여주는것. 이 기능을 가진게 Router임
Router Components 종류
- BrowserRouter =>多用
- HashRouter
- MemoryRouter
- NativeRouter
주로 BrowserRouter사용하고, 필요에따라 HashRouter 사용
BrowserRouter
html5의 history API를 사용함. 주로 동적인 페이지에서 사용
HashRouter
주소에 해시태그 붙음
여기 놓침!
react-router-dom
yarn add react-router-dom
리액트라우터 v6에서는 v5작동 안함!
자주 쓰이는 라우터 모듈 3가지
- BroswerRotuer
- History객체 생성.
- 라우터 컴포넌트 최상단에 위치해야함
- react-router가 원활히 동작할수있게 도와주는 인터페이스
- Route
- Routes
페이지 간 이동
Link
to 값에 있는 문자열로 url 이동
브라우저 상에는 a 태그로 나타남!
그 외
- relative
- preventScrollReset
- replace
- state
- reloadDocument
- unstable_useViewTransitionSTate
useLocation()
현재 url에 담긴 정보들을 객체로 반환해줌
useNavigate()
단순히 Link를 클릭해서 페이지를 이동하는게 아닌, 특정 이벤트가 실행됐을때 ~~
useParams()
파라미터 가져옴
중첩 라우팅
outlet
Query String
useSearchParams()
언제 파라미터를 쓰고 언제 쿼리스트링을 써야할까? => 정해진건 없음
url 파라미터: 특정 id나 이름을 가지고 조회할때 사용
퀴리스트링: 데이터 조회에 필요한 옵션을 전달할때 사용