react-router-dom
페이지를 구현할 수 있게 해주는 패키지
styled-components, redux 와 같은 패키지 여러페이지를 가진 웹을 만들 수 있게끔 해줌
설치방법 yarn add react-router-dom
1. 페이지 컴포넌트 생성
여러 페이지를 만들면됨. 예를들면 Home, About, contact... 이런 페이지를 만든다 생각
2. router.js 생성 및 router 설정코드 작성
[중요] 브라우저에 url을 입력하고 이동했을 때 원하는 페이지 컴포넌트로 이동하게끔 만드는 부분.url 한개당 페이지 컴포넌트를 매칭하는건데 이 한개의 url을 route라고 함
route를 설정하는 코드는 router.js 란 파일을 별도로 분리해서 많이 작성함.
3. app.js에 import 적용
router컴포넌트를 app.js에 import하면됨.
react-router-dom Hooks
react로 치면 전에 배운 useState, useEffect, useRef 등 과 같은 것
useNavigate
다른페이지로 보내고자 할때 사용
어떤 버튼을 누르면 페이지로 이동하거나 또는 어떤 컴포넌트를 눌렀을 때 페이지를 이동하게 쓰는 훅
useLocation
react-router-dom을 사용하면 현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있음.
이정보를 이용해서 페이지 안에서 조건부 렌더링에 사용하는 등, 여러가지 용도로 활용 가능
Link
Link는 훅이 아니지만 꼭 알아야 할 API
Link는 html 태그중 a 태그의 기능을 대체하는 API. JSX에서 a태그를 사용해야 한다면 반드시 Link를 사용해서 구현해야 함
왜냐? a태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침 되기 때문임. 브라우저가 새로고침 되면 모든 컴포넌트가 다시 렌더링되어야하고 redux나 useState를 통해 메모리상에 구축해놓은 모든 상태값이 초기화가 됨.
Dynamic Route
동적 라우팅이라고도 말하는데 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법