React Routing

Hover·2022년 9월 19일

리액트 라우팅이란?

라우팅이란 사용자가 요청한 url에 맞는 페이지를 보여주는 것
리액트 자체에는 라우팅 기능이 내장되어 있지 않다.
라이브러리를 설치하여 라우팅 기능을 구현 해줘야한다.

리액트는 SPA방식으로 렌더링
새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태
react-router-dom은 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리.

리액트 라우터 설치

npm i react-router-dom 을 이용해서 라이브러리 설치를 한 후 사용을 하면 된다.

라우트 정의

BrowserRouter : 라우터의 역할 담당, 라우팅에 포함시킬 페이지들은 BrowerRouter에 모두 감싸 주어야 한다.
Routes : 여러 개의 Route들을 감싸서 경로가 일치하는 하나의 Route를 렌더링시켜준다.

공통으로 렌더링을 하는 Header나 Footer같은 경우는 Routes 바깥에 작성해준다.
Route : 경로와 경로에 띄워 줄 컴포넌트를 받는다

<Route path='/경로' element={<Component />} />

라우트 실습

간단한 이동 페이지를 만들어봤다.

/* app.js */
import React from 'react';
import {BrowserRouter,Route,Link,Routes} from 'react-router-dom';

import './App.css';

import Header from './components/Header.jsx';
import Course from './components/Course.jsx';
import Home from './components/Home.jsx';
import NotFound from './components/NotFound';
import Roadmap from './components/Roadmap.jsx';
import Linkpage from './components/Linkpage.jsx';
function App() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Course" element={<Course />}></Route>
        <Route path="/Roadmap" element={<Roadmap />}/>
        <Route path="/Linkpage" element={<Linkpage />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

react-router-dom으로부터 사용할 hooks들을 임포트해준다.

app 전체를 browserRouter로 감싸준다.
주소에 아무 path도 없을 경우 Home 컴포넌트를 기본적으로 보여준다.
이후 각각의 경로마다 컴포넌트를 설정한 후 잘못된 경로에는 *를 붙여서 NotFound 컴포넌트에 연결 해준다.

Link로 페이지 이동하기

/* Home.jsx */
import React from 'react'
import { Link,useNavigate } from 'react-router-dom'

function Home() {
  const navigate = useNavigate();
  const moveRoadmap = ()=>{
    navigate('/Roadmap',{
      state:{
        id:1,
        roadmap:"frontend",
      }
    })
  }
  return (
    <div>
        <h2>Here is home</h2>
        <Link to="/Linkpage" className='link'>링크페이지</Link>
        <Link to="/Course" className='link'>Course</Link>
        <button onClick={moveRoadmap}>Roadmap</button>
    </div>
  )
}

export default Home

route path에 아무것도 없을 때 렌더링해주는 Home 컴포넌트다.
link page와 course page가 link로 연결되어있다.

app.js에서 해당 경로를 route로 설정 해줬으므로 링크를 클릭하면 해당 페이지로 넘어간다.

링크는 보통 추가적인 기능 없이 클릭시 바로 이동하는 로직을 사용할때 적절하다.

useNavigate Hook으로 페이지 이동하기

course page를 보면 홈화면으로 이동하는 버튼이 있다

/* Course.jsx */
import React from 'react'
import {useNavigate} from 'react-router-dom';

function Course() {
    const navigate = useNavigate();
    const onClickgoHome = ()=>{
        navigate('/');
    }
  return (
    <div>
        <h3>Here is Course</h3>
        <button onClick={onClickgoHome}>홈화면으로 이동</button>
    </div>
  )
}

export default Course

useNavigate를 선언 해주고 Navigate 변수와 onClick함수를 선언 해준다.

useNavigate + useLocation 으로 데이터 주고받기

useNavigate는 Link와는 다르게 페이지 이동 시 어떠한 정보를 주고받을 때 사용한다.
보통 특정 event(Click)이 발생할때 url을 조작하는 경우 사용한다.

Home.jsx에서 Roadmap.jsx 로 데이터를 전달해보겠다.

navigate에 링크와 state를 추가하였다.

navigate('/이동경로',{state:{키:값,키:값,...}}) navigate는 이런 식으로 사용이 가능하다.

/* Roadmap.jsx */
import React from 'react'
import {useNavigate,useLocation} from 'react-router-dom';

function Roadmap() {
  const navigate = useNavigate();
    const onClickgoHome = ()=>{
        navigate('/');
    }
    // 1. location 훅 취득
    const location = useLocation();

    // 2. location에서 props값 꺼내기
    console.log(location);
    const {id,roadmap} = location.state;
  return (
    <div>
        <h3>Here is Roadmap</h3>
        <p>id : {id}</p>
        <p>roadmap : {roadmap}</p>
        <button onClick={onClickgoHome}>홈화면으로 이동</button>
    </div>
  )
}

export default Roadmap

데이터 전달을 받을때 사용하는 useLocation부터 임포트 해준다.

location변수에 useLocation Hook를 전달해주고
구조 분해 할당으로 전달된 데이터를 각 변수로 정의해준다.

Roadmap 페이지가 받는 useLocation을 콘솔에 출력해봤다.
useLocation 객체는 현재 사용자가 보고있는 페이지의 정보를 가지고 있다.

hash : 주소의 # 문자열 뒤의 값 (주로 History API가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용)
key : location 객체의 고유 값, 초기에는 default 이고, 페이지가 변경될 때마다 고유의 값이 생성됨.
pathname : 현재 주소의 경로 (쿼리스트링 제외)
search : 맨 앞의 ? 문자를 포함한 쿼리스트링 값
state : 페이지로 이동할 때 임의로 넣을 수 있는 상태 값