리액트 스터디 12탄) 라우팅(2)

리액트를 다루는 기술을 참고하여 기술하였습니다.

---

라이브러리 설치

리액트 라우터 돔을 설치할 리액트 프로젝트의 파일에서 다음과 같이 터미널에 작성을 하면 이용이 가능해진다.

yarn add react-router-dom
혹은
npm install react-router-dom

라이브러리 세팅

index.js파일에서 다음과 같이 작성한다.

import {BrowserRouter} from "react-router-dom";

그리고 <App/>을 다음과 같이 감싸준다.
<BrowserRouter>
	<App/>
<BrowserRouter>

이렇게 작성하고 나면 모든 준비가 완료됨.

라우터 사용방법

import {Routes, Route, Link} from 'react-router-dom'

이렇게 작성하면 사용이 가능한데

프레그먼트 태그를 제외하고 가장 높은 상위 태그에 <Routes>를

그리고 이후에 <Route>를 통해서 페이지를 나눌수 있다.

<Route path="/detail" element{<div>상세페이지<div>}/>

이렇게 작성을 하게 되면, /detail이라는 주소로 접근을 하면 element안에 있는 컴포넌트를 보여주게 된다.

index props

Route에서

<Route path="/" element ={<Home/>}/>

처럼 보통 메인 페이지를 path=”/” 로 작성하게 되는데, 이것 대신에 사용할수 있는것이 index이다.

그냥 다를거 없다.

index=(path=”/”)라고 생각하면 된다.

Link

위에서 만든 route를 사용해서 경로를 통해서 이동을 하고 싶을때, 위에 방법에서는 직접 주소를 통해서 이동을 해야하지만, 이는 일반유저들이 사용하기 어렵다. 그렇기 때문에 링크들을 걸어서, 직접 눌러서 라우터로 이동하게 할수 있다.

링크는 어떠한 버튼을 눌렀을때, 이동을 하게 되는것을 구현할때 사용하게 된다.

• 뒤에 navigator을 사용하게 되는데 navigator과 다른점은 html의 a태그와 비슷한것이 link이고 navigator의 경우에는 어떠한 조건을 만족시 이동을 할수 잇도록 조정하는 hook이다.

그렇기 때문에 navigator와 구분되는것이다.

link와 navigator의 차이

Uploaded by N2T