React Router Dom

페이지를 구현할 수 있게 해주는 라이브러리
해당 라이브러리를 이용하면 리액트로 다른 페이지도 구현 가능

사용방법

1. 터미널로 yarn 또는 npm으로 설치

yarn add react-router-dom 

2. 페이지 컴포넌트 생성

3. App.js에 import 및 적용
   페이지들 import
   BrowserRouter => Routes => Route 내부에 path와 이동할 컴포넌트 작성

4. 페이지 이동 테스트
   / 로 경로 구분

react-router-dom Hooks

필수적인 부분만 기술

1. useNavigate


어떠한 버튼을 클릭시 지정되어 있는 페이지로 이동하게 하는 훅


useNavigate를 받는 변수 선언
onClick속성 내부에 navigate("/컴포넌트")로 사용

2. useLocation


페이지의 여러가지 추가 정보가 나옴
해당 정보를 활용해 조건부 렌더링 등등 여러방식으로 사용가능

Link

a태그를 대체하는 기능 a태그 사용시 리덕스,useState를 통해 쌓아놓은 모든 상태값이 초기화 되기 때문에 Link로 대체해야 함


to라는 옵션을 사용해야함

children 용도

어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 예상할 수 없는 경우가 있다.
범용적인 박스 역할을 하는 Sidebar,Dialog와 같은 컴포넌트에서 자주 볼 수 있다.


예를 들어 Layout으로 전체 앱을 감싸고 내부에 children만 교체하는 방식으로도 개발 가능
(쉽게 얘기하면 네비게이션바랑 푸터는 냅두고 가운데만 교체하는 식)

Dynamic Route(동적 라우팅)

Dynamic Route란 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법


기존 방식 처럼 라우팅을 일일이 주는게 아닌
해당 예에선 work컴포넌트 파일을 만들고
path = "works/:id" 와 같이 /: 뒤에 id와 같은 아무 식별자를 작성

useParam

위의 예제에서 path에 있는 id 값을 조회할 수 있게 사용하는 훅