React (9) Router

■ 라우팅이란?

- 웹 서버에서 명시된 자원을 찾는 과정이다.

- Servlet Framework에서는 클라이언트가 호출한 url에 해당하는 웹페이지를 서버에 제공해 주었다.

- 리액트에서는 url이동이 서버에서 forwarding 해주거나 redirect해주는 것이 아니라 location객체, history객체를 이용해서

클라이언트 측에서 페이지 이동이 이루어지는 것처럼 보이게 한다. 

 

● react-router-dom

* 라우터를 지원하는 패키지 다운로드
npm install react-router-dom

- react-router-dom은 BrowserRouter, Routes, Link기능을 제공한다.

• BrowserRouter : Route를 사용하기 위해서 감싸줘야 하는 태그
• Route : 호출되는 url에 따라 이동하고자 하는 Component를 정의한다.
• Link : <a> 태그와 같이 페이지에서 표시되는 링크를 클릭하면 url을 호출한다.

예시)

import { BrowserRouter, Route, Routes } from "react-router-dom";

import ReactRouter from "./router/ReactRouter1";
import ReactRouter2 from "./router/ReactRouter2";
import ReactRouter3 from "./router/ReactRouter3";
import NoMatch from "./router/NoMatch";

function RouterComponent(){

    return (
        <div>
            {/* Route를 사용하기 위해서는 BrowserRouter로 감싸줘야한다.(보통 최상위 컴포넌트에 추가한다.) */}
            <BrowserRouter>
                <Routes>
                    {/*
                        path속성 : 호출되는 url경로
                        element : url호출시 사용할 컴포넌트를 지정
                    */}
                    <Route path="/" element={<ReactRouter/>}/>
                    <Route path="/route1" element={<ReactRouter2/>} />
                    <Route path="/route2" element={<ReactRouter3/>} />

                    <Route path="*" element={<NoMatch/>} />
                </Routes>
            </BrowserRouter>
        </div>
    )

}

 

■ useNavigate

- 함수형 컴포넌트에서 페이지 이동을 쉽게 처리할 수 있도록 도와주는 함수

- Link와 비슷한 기능을 하지만 이동하고자 하는 경로를 동적으로 조작할 수 있다.

 

■ useLocation

- location객체를 다룰 수 있는 함수

- 현재 페이지의 url정보를 가져올 때 사용한다.

※ window.loaction과 같다.

 

■ useSearchParams 

- 쿼리스트링을 쉽게 조작하도록 도와주는 함수

 

예시)

 

import { useNavigate, useLocation, useSearchParams } from "react-router-dom";

function ReactRouter3(){

    const navigate = useNavigate();
    const location = useLocation();

    const [parameters, setSearchParams] = useSearchParams();
    // parameters란? 쿼리스트링에 들어간 key, value형태의 데이터가 저장된 "객체"
    // setSearchParams란? 쿼리스트링을 업데이트 시켜주는 함수

    const paramvalue = parameters.get("name");

    const handleUpdateParam = () => {
        setSearchParams({name : paramvalue + "1234"});
    }

    const handleNavigate = () => {
        navigate('/route1');
        // Route에 지정해둔 경로에 맞는 컴포넌트가 랜더링된다.
    }

    return(
        <div>
            <h1>현재 path :: {location.pathname}</h1>
            <h1>넘겨받은 쿼리스트링 :: {location.search}</h1>
            <button onClick={handleUpdateParam}>파람값 변경하기</button> <br/>
            <button onClick={handleNavigate}>route1으로 이동</button>
        </div>
    )

}