[React] react router 설치 & 사용 & hook함수(useParams, useNavigate)

참고 사이트

https://reactrouter.com/en/main

Home v6.6.2

 

리액트 라우터

각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리

spa에서 새로운 페이지를 로드하지 않고 하나의 페이지안에서
필요한 컴포넌트만 가져와서 다른 페이지를 나타내는 방식을 지원

 

*라우팅: 사용자가 요청한 url에 따라 해당 url에 맞게 페이지를 보여주는 것

이전 mpa새로운페이지를 로드하며 페이지를 이동하는 방식
<a herf="sub.html"> 서브페이지</a>

 

ex.

글쓰기 페이지: 새로운 포스트 작성하는 페이지

포스트 목록 페이지: 블로그에 작성된 여러 포스트들의 목록을 보여주는 페이지

포스트 읽기 페이지: 하나의 포스트를 보여주는 페이지

 

이렇게 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로

라우팅 시스템!!!!!

리액트 시스템을 구축하기위해 사용할 수 있는 선택지는 크게 두가지있음

 

리액트 라우터(React Router):

이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용됨.

이 라이브러리는 컴포넌트 기반으로 라우팅 시스템 설정

 

Next.js: 

Next.js 는 리액트 프로젝트의 프레임워크입니다. 이 프레임워크는 우리가 사용했던 Create React App처럼 리액트 프로젝트 설정을 하는 기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능들을 제공함

이 프레임워크의 라우팅 시스템은 파일 경로 기반으로 작동합니다. 이 프레임워크는 리액트 라우터의 대안으로 많이 사용되고 있습니다.

 

 

리액트 라우터 적용 및 기본 사용법

프로젝트 생성 및 라이브러리 설치

↓↓↓

  페이지를 만들고 이동해보기

↓↓↓

URL 파라미터와 쿼리스트랑 사용해보기

↓↓↓

 중첩된 라우트 구현하기

↓↓↓

리액트 라우터의 부가기능 사용해보기

 

1) 라우터 설치하기

npm install react-router-dom

2) 라우터 사용하기

1. 상위 컴포넌트에서 라우터를 적용 --> <BrowserRouter>컴포넌트 사용

 

ex)

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


<BrowserRouter>
	<App></App>
</BrowerRouter>

 

2. 페이지 컴포넌트 생성하기

Home.js

import React from 'react';
const Home = () => {
    return (
        <div>
            <h2>홈</h2>
            <p>가장 먼저 보여지는 페이지입니다.</p>
        </div>
    );
};
export default Home;

 

Product.js

import React from 'react';
const Product = () => {
    return (
        <div>
            <h2>제품페이지</h2>
            <p>제품페이지 입니다.</p>  
        </div>
    );
};
export default Product;

 

 

3. 경로에 따라 보여질 component를 설정 <Routes><Route>컴포넌트 사용

 

Routes컴포넌트는 여러 Route를 감싸서 그 중 url이 일치하는 라우트 단 하나만  렌더링 시켜줌
Route는 path속성에 경로, element속성에 컴포넌트를 지정

구문)

<Routes>
    <Route path="경로" element={<component/>}/>
    <Route path="경로" element={<component/>}/>
</Routes>

 

예시)

<Routes>
    <Route path="/" element={<Home/>}/>
    <Route path="/product" element={<Product/>}/>
</Routes>

//localhost: 3000/product

 

4. Link 컴포넌트를 사용하여 다른페이지로 이동하는 링크 설정

웹페이지에서 링크를 보여줄 때 a태그 사용

리액트 라우터를 사용하는 프로젝트에서 a태그를 바로 사용하면 안됨

이유는 a태그를 클릭하여 페이지를 이동할 때 브라우저에서는 페이지를 새로 불러오게 되기 때문

 

Link컴포넌트 역시 a태그를 사용하긴 하지만 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있음

 

구문)

<Link to = "경로">링크 이름</Link>

 

Header.js 

import React from 'react';
import { Link } from 'react-router-dom';

const Header = ({sitename}) => {
    return (
        <div>
            <h1>{sitename}</h1>
            <ul>
                <li><Link to="/">home</Link></li>
                <li><Link to="/product">아이폰</Link></li>
            </ul>
        </div>
    );
};
export default Header;

 

App.js

<div className="App">
    <Header sitename="green"/>
    <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/product' element={<Product/>}/>
    </Routes>
</div>

 

5. url 파라미터와 쿼리 스트링

페이지 주소를 정의할때 가끔 변화는 유동적인 값을 사용해야 할때도 있음.

 

1) URL파라미터 예시

/product/item1

URL 파라미터는 주소의 경로에 유동적인 값을 넣는 형태

 

2) 쿼리스트링 예시

/product?item=1&keyword=react

쿼리 스트링은 주소의 뒷부분에 ?문자열 이후에 key=value로 값을 정의하며 &로 구분하는 형태

 

 

♣ URL 파라미터는 ID 또는 이름을 사용하여 특정 데이터 조회할 때 사용

♣ 쿼리 스트링은 키워드 검색, 페이지네이션, 정렬방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용

 

 

구문)

URL 파라미터 사용하기

Route 컴포넌트 path속성에서 params 객체의 키(/:키이름) 을 지정

<Route path='/product/:productname' element={<Product/>}/>

 

Link 컴포넌트의 to속성에서 값을 넘겨줌

<Link to="/product/item1">아이폰</Link>

 

useParams() hook함수 사용     

import { useParams } from 'react-router-dom';
const { productname } = useParams();

Route 컴포넌트에서 key값 넘기고 Link컴포넌트에서 value값을 넘기면 useParams()함수에 담아주고

객체를 리턴해줌 { productname: "item1"}

 

---

useNavigate()

Link컴포넌트를 사용하지 않고 다른페이지로 이동을 해야할 때

사용하는 Hook

const navigate =useNavigate();

 

이전페이지로 이동

navigate(-1)

경로로 이동

navigate('/product')