React Router

라우팅(Routing)이란?

• 사용자가 요청한 URL 에 따라 해당 URL 에 맞는 페이지를 보여주는 것

• 가장 많이 쓰이는 라이브러리? React Router

 

리액트 라우터 ( React Router )

• 개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리

• 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트 제공

 

리액트 라우터 ( React Router )의 주요 컴포넌트

BrowserRouter	• HTML5를 지원하는 브라우저의 주소 감지 • Router의 역할 • 새로고침을 하지 않아도 새로운 컴포넌트를 렌더링 해주는 기능 담당 • URL마다 컴포넌트가 바뀔 때 이때 바뀌는 부분의 최상단에 위치해야 한다
Routes, Route	• 경로가 일치하는 컴포넌트를 렌더링해주도록 경로 매칭 • Route에서는 구체적으로 어떤 컴포넌트를 렌더링할지 결정 • path는 경로, element는 연결한 컴포넌트.
Link	• 경로를 변경한다. • 기존 HTML 의 a 태그가 새로고침 해 렌더링을 수행했다면 컴포넌트는 페이지 전환을 방지한다.

 

리액트 라우터 ( React Router )의 사용법 

useParams()	1. 미리  app 파일에서 작성한 path 내 주소에 :(변수)가 있어야 사용 가능 2. URL 파라미터가 여러 개인 경우 /product/:id/:name 처럼 설정
useSearchParams()	1. 미리 app 파일에서 작성한 path 주소 내에 /?변수명= 변수값이 존재해야 사용가능 2. 물론 setSearchParams를 이용해 데이터를 찾는 것 역시 가능하다.
useNavigate()	1. Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 하는 경우, 뒤로가기 등에 사용한다