| React | 나는 Router v6 처음이다.

React Router v6은 2021년 11월에 나왔습니다.
(주의: 현업에서는 새로운 버전이 나왔다고 해서 바로 적용하지는 않습니다.)

 

리액트에서 갑자기 라우터는 뭐고 왜 배워야 할까? 

URL에 따라서 그에 상응하는 화면을 전송해주는 것을 Routing이라고 한다.

리액트는 SPA 방식에서는 오직 하나의 페이지만 가지고 있기 때문에 MPA 방식으로의 페이지 이동이 불가능하다.

왜냐하면, 페이지 (html)가 아닌 데이터를 가지는 JS 파일로 구성이 되어 있기 때문이다.

​React-Router는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라서 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다.

 

---

< Router 설치 >

1. 터미널 열어서 npm install react-router-dom@6 입력해서 설치

2.  index.js 파일

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>
);

<BrowserRouter> : html5의 history API를 이용해 UI 업데이트를 한다

 

► 라우터로 페이지 나누는 법

: 웹사이트의 "어쩌구/A"하면 A페이지를 보여주는 것처럼 url 경로마다 다른 페이지를 보여주고 싶을 때 사용한다. 

 

App.jsx 파일

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

function App(){
  return (
    <Routes>
      <Route path="/detail" element={ <div>상세페이지</div> } />
      <Route path="/about" element={ <div>어바웃페이지</div> } />
    </Routes>
  )
}

1.  상단에 사용할 여러가지 컴포넌트를 import 해오기

2. <Routes> 만들고 그 안에 <Route>를 작성합니다.

3. < Route path="/url경로" element={ <보여줄 html > } />

 

►  페이지 이동 버튼  Link

: 생각해보면 우리는 위와 같이 "어쩌구/A" 이렇게 글씨를 입력하여 url을 들어가지 않는다. 

버튼을 클릭하여 원하는 페이지로 들어간다.

1. import { Link } from 'react-router-dom';

2. 링크를 만들고 싶으면 원하는 곳에 url 경로로 이동하는 링크를 생성하면된다.

<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

 

👀  갑자기 궁금한 점: 근데,, <a> 태그라는 게 있잖아요?
a 태그는 클릭했을 경우, href에 설정해준 경로 이동과 동시에 페이지를 새로 불러오기 때문에 페이지가 새로고침이 된다.
Link의 경우 HTML5 History API를 사용해서 브라우저의 주소를 바꿔주는 것이기 때문에 페이지를 불러오지 않고 dom만 조작해서 페이지를 보여줍니다.

 

► 페이지 이동 기능을 만들고 싶으면 useNavigate()

: 페이지 이동은 Link 써도 된다고 했는데 그게 못생겼으면 이거 쓰면 되는 것이다.

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

function App(){
  let navigate = useNavigate()
  
  return (
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

useNavigate을 사용해서 다양한 기능을 구현할 수 있다. 

💡 navigate() 숫자 넣으면 앞으로 가기, 뒤로 가기 기능 개발도 가능
-1 넣으면 뒤로 1번 가기

2 넣으면 앞으로 2번 가기 기능입니다.

 

💡 404페이지 : 유저가 이상한 경로로 접속했을 때 "없는 페이지입니다”

<Route path=" * " element={ <div> 없는 페이지입니다 </div> } />

* 경로는 모든 경로를 뜻해서 위에 만들어둔 /detail 이런 게 아닌 이상한 페이지 접속 시 * 경로로 안내해준다.

 

► 서브 경로 만들 수 있는 nested routes

/어쩌꾸/저쩌구 처럼 서브경로 어쩌구의 저쩌구 페이지를 만들어준다.

<Route> 안에 <Route>를 넣을 수 있는데 이걸 Nested routes라고 부르는 것이다.

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

• /about/member로 접속 시 <About> &<div>멤버들</div> 을 보여준다
• /about/location으로 접속시 <About> & <div> 회사 위치 </div>을 보여준다

 

실은 저렇게만 하면 <div>는 안 보인다..!^^

► <div> 내용을 어디다가 보여줘야 할지 표기해야 한다.. 그것은 Outlet 

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}

1. import {  Outlet } from 'react-router-dom’

2.  <Outlet> < Outlet/>

import해온 <Outlet>은 nested routes안의 element들을 어디에 보여줄지 표기하는 곳이다.