[React] React Router

목차

1. React Router란

2. Browser Router의 사용법

3. URL 정보 받기

---

React Router란

리액트는 SPA(Single Page Application) 방식으로 동작합니다.

여러 페이지를 사용해서 새로운 페이지를 로드해서 사용하는 방식(MPA)과는 다릅니다.

새로운 페이지를 로드하는 것이 아니라, 페이지 안에서 필요한 데이터만 가져와서 화면을 구성하는 방식입니다.

그렇기 때문에 URL이 변경되어도 페이지를 새로 고치지 않고 컴포넌트만 변경할수 있도록 설계되어있습니다.

 

React Router는 리액트 애플리케이션에서 클라이언트 측 라우팅(Client Side Routing)을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다.

 

기본 HTML에서는 <a> 타입을 사용하면 페이지가 새로고침되면서 화면 요청을 다시 요청하면서 SPA의 장점을 살리기 어려워집니다.

하지만 React Router를 사용하면 특정 화면으로 변경이 필요할때 브라우저의 히스토리를 조작해 화면이 변경될때 페이지를 새로 불러오는 것이 아닌 필요한 부분만 다시 렌더링 하는 방식으로 불필요한 라우팅을 방지할 수 있습니다.

 

장점

• 페이지 새로고침 없이 경로 변경
• 네비게이션 및 리다이렉트 기능
  • <Link>, useNavigate, <Navigate>등의 기능으로 직관적인 페이지 이동 가능
• 중첩 라우트 및 보호된 라우트 지원
  • 복잡한 애플리케이션에서도 효율적인 라우트 구성 가능

 

React Router 종류

Browser Router

• HTML5를 지원하는 브라우저의 주소 감지 라우터
• History API를 사용해서 URL 관리
• URL관리 유리
• 복잡한 대규모 프로젝트에서 유리

Hash Router

• URL에 해시(#)를 포함해 경로 관리
• 주로 정적 웹사이트에서 사용
• 중소규모 프로젝트에서 유리

---

Browser Router의 사용법

대부분의 프로젝트에서 Browser Router컴포넌트를 사용하고 진행할 프로젝트에서도 Browser Router를 사용 예정이기에 해당 Router에 대해 자세히 알아보겠습니다.

 

<BrowserRouter>

BrowserRouter라는 리액트 라우터를 사용하기 위한 컴포넌트로, 최상위 컴포넌트에 감싸줘야합니다.

function App() {

    return (
        <>
            <BrowserRouter>	//최상위 컴포넌트에 구성
                <AppRouteInfo/>	//사용될 자식 컴포넌트들
            </BrowserRouter>
        </>
    )
}

<Routes>

사용할 <Route>들을 감싸는 부모 컴포넌트, 규칙에 일치하는 하나의  Route 하나만 라우팅 시켜 렌더링 시켜주는 역할을 합니다.

<Route>

사용자가 요청하는 path경로에 규칙이 일치하면 element에 정의된 컴포넌트를 렌더링 시켜주는 역할을 합니다.

path속성에 사용자 요청 url, element속성에 렌더링할 컴포넌트

function RouterPage() {
    return (
        <div className="App">
            <BrowserRouter>
                <HeaderPage/>
                <Routes>	//<Route>관리 컴포넌트
                    <Route path="/" element={<HomePage/>}></Route> //라우팅 관리 컴포넌트
                    <Route path="/product/*" element={<ProductPage/>}/>
                    <Route path="*" element={<NotFoundPage/>}/>
                </Routes>
            </BrowserRouter>
        </div>
    )
}

<Link>

History API를 통해 브라우저 주소의 경로만 바꿔주는 기능이 내장된 컴포넌트입니다.

비슷한 기능으로 <a>타입이 있는데, 이동시 페이지를 새로 로드하기 때문에 효율이 좋지 못합니다.

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

function HomePage() {
    return(
        <>
            <h3>안녕하세요. 홈페이지 입니다.</h3>
            <ul>
                <Link to="/product/1"><li>1번 상품</li></Link>
                <Link to="/product/2"><li>2번 상품</li></Link>
            </ul>
        </>
    )
}

export default HomePage;

 

useNative

지정한 경로로 페이지를 이동시킬 수 있는 훅 기능입니다.

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

function HomePage() {

    const navigate = useNavigate();	//navigation함수 호출

    function navigation(url) {
        navigate(url, {
            state: {   //state 정의 가능
                productName : "겨울 코트"
            },
        })
    }
    
    return (
        <>
            <h3>안녕하세요. 홈페이지 입니다.</h3>
            <ul>
                <li>
                    <button onClick={() => navigation("/product/9999?search=productName&q=demo#test")}>상품 메인</button>
                </li>
            </ul>
        </>
    )
}

 

 

Navigate 컴포넌트

지정한 경로로 리렌더링 컴포넌트 기능입니다.

컴포넌트가 렌더링 되지마자 조건에 따라 자동으로 정의한 경로로 이동하여 렌더링됩니다.

return isLoggedIn ? <Dashboard /> : <Navigate to="/login" replace />;

로그인 여부를 판단해서 로그인이 되었다면 Dashboard컴포넌트 렌더링, 로그인이 되지 않는다면 /login 경로로 이동해서 컴포넌트를 렌더링합니다.

 

Link컴포넌트 vs useNavigate 훅 vs Navigate 컴포넌트

위의 세가지 기능은 라우터를 이용해 컴포넌트를 렌더링하는 공통적인 역할을 수행합니다. 이것들의 차이는 무엇이고 어떤 상황에서 사용하는것이 좋은지 알아보겠습니다.

• Link 컴포넌트
  • 사용자 클릭 기반 네비게이션
  • 사용자가 클릭시 바로 페이지 변경하는 로직 구현시 사용
  • 활용
    
    • 버튼, 메뉴 클릭으로 이동
• useNavigate
  • JS코드로 동작하는 명령형 라우팅
    • 로직안에서 URL을 이동시키고 싶을때 사용
    • 이벤트 기반, 조건부 이동 등 프로그램 흐름에 의한 이동이 가능
  • 페이지 전환시 추가로 처리해야하는 로직이 존재하는 경우
    • 회원가입 여부를 판단하고 되어있는 경우 main페이지로, 가입이 되어있지 않는 경우 signup페이지로 이동
  • 활용
    • 버튼, 메뉴 클릭으로 이동(onClick이벤트 → useNavigate)
    • 로그인 성공 후 자동 이동
• Navigate 컴포넌트
  • 렌더링 결과로 즉시 리다이렉트되는 선언형 컴포넌트
    • JSX안에서 현재 컴포넌트가 렌더링되면 바로 선언된 컴포넌트로 보낸다라는 선언을 하는 방식
  • 활용
    • 로그인 안 한 사람이 보호 페이지에 들어오면 자동 이동
    • 특정 조건시 화면이 렌더링되면 바로 리다이렉트 해야할 때

---

URL 정보 받기

react router를 통해 url 이 입력되면 함께 넘어오는 정보를 받아오는 방법입니다.

url로 데이터를 전달하는 방법은 크게 URL파라미터와 쿼리스트링을 사용합니다.

 

URL 파라미터 받기

BrowerRouter를 사용할때 URL 파라미터를 사용해 요청 정보를 사용하는 방법입니다.

useParams()를 사용해서 파라미터를 받을 수 있습니다.

 

요청시

/:[요청 변수] 형태로 URL로 요청합니다.

<BrowserRouter>
    <HeaderPage/>
    <Routes>
        <Route path="/" element={<HomePage/>}></Route>
        <Route path="/product/:productId" element={<ProductPage/>}/> //파라미터 사용을 위해 :productId 적용
        <Route path="*" element={<NotFoundPage/>}/>
    </Routes>
</BrowserRouter>

 

수신시

react router에서 제공하는 useParams()을 통해 요청온 변수로 값을 받아올 수 있습니다.

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

function ProductPage() {
    const {productId} = useParams(); //파라미터를 받아옴

    return (
        <>
            <h3>{productId} 상품 페이지입니다.</h3>
        </>
    )
}

 

요청 URL : /products/1

---

쿼리스트링으로 정보받기

URL 요청 중 ? 뒤로 데이터를 전달되는 데이터를 받는 방법입니다.

useSearchParams()를 통해 데이터를 전달받을 수 있습니다.

 

수신시

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

function ProductPage() {
    const {productId} = useParams();
    const [searchParams, setSearchParams] = useSearchParams(); //useSearchParams() 설정
    const searchWords = searchParams; //요청된 모든 쿼리변수
    const searchWord = searchParams.get("search"); //특정 쿼리변수

    return (
        <>
            <h3>{productId} 상품 페이지입니다.</h3>
            <ul>
                <li>searchWords : {searchWords}</li>
                <li>searchWord : {searchWord}</li>
            </ul>
        </>
    )
}

 

요청 URL : /product/9999?search=productName&q=demo#test

---

그 외

useParams()로 URL파라미터, useSearchParams()로 쿼리 스트링 값을 조회할 수 있습니다.

 

그 외에 URL정보를 가져오는 방법입니다.

 

useLocation

• hash
  • 주소의 해시(#) 문자열 뒤의 값
• pathname
  • 현재 주소 경로
• search
  • ?을 포함한 쿼리스트링
• state
  • 페이지로 이동시 임의로 넣을 수 있는 상태값
• key
  • location객체의 고유 값, 페이지가 변경될 때마다 고유의 값 생성

 

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

function ProductPage() {
    const location = useLocation();

    return (
        <>
            <h3>{productId} 상품 페이지입니다.</h3>
            <ul>
                <li>hash : {location.hash}</li>
                <li>pathname : {location.pathname}</li>
                <li>search : {location.search}</li>
                <li>state : {JSON.stringify(location.state)}</li>
                <li>key : {location.key}</li>
            </ul>
        </>
    )
}

요청 URL : http://localhost:3000/product/9999?search=productName&q=demo#test

요청 state = {productName : " 겨울 코트"}

---

참고

https://jofestudio.tistory.com/66

[React.js] React Router - useNavigate()와 useLocation()으로 데이터 주고받기

https://goddaehee.tistory.com/305

[React] 6. React Router (리액트 라우터) 사용하기

https://velog.io/@ahn-sujin/React-Link-컴포넌트와-useNavigate의-차이

[React] Link 컴포넌트와 useNavigate의 차이

https://duklook.tistory.com/292#google_vignette

[react-router-dom] useSearchParams () 에 대한 정리