[React] react-router 사용하기

안녕하세요. J4J입니다.

 

이번 포스팅은 react-router 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

환경 설정

 

[ 1. 패키지 설치 ]

 

$ npm install react-router react-router-dom
$ npm install -D @types/react-router @types/react-router-dom (typescript 사용하는 분만 설치)

 

 

 

[ 2. BrowserRouter로 App 감싸기 ]

 

import * as React from 'react';
import ReactDom from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDom.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.querySelector('#root'),
);

 

 

 

[ 3. App.tsx에서 Route를 이용하여 페이지별 컴포넌트 등록 ]

 

import React from 'react';
import { Route, Routes } from 'react-router';
import LinkPage from './pages/linkPage';
import LocationPage from './pages/locationPage';
import NotFoundPage from './pages/notFoundPage';
import ParamPage from './pages/paramPage';
import RedirectPage from './pages/redirectPage';
import WrapperPage from './pages/wrapperPage';

const App = () => {
    return (
        <Routes>
            {/* /link를 입력하면 LinkPage 오픈 */}
            <Route path="/link" element={<LinkPage />} />
            
            {/* /location으로 시작하는 url을 입력하면 LocationPage 오픈 */}
            <Route path="/location/*" element={<LocationPage />} />

            {/* 상대경로로도 등록 가능, parameter 추가는 :을 이용 */}
            {/* /param을 입력하면 ParamPage 오픈 */}
            {/* /param/{ value }을 입력해도 ParamPage 오픈 */}
            <Route path="/param" element={<WrapperPage />}>
                <Route path="." element={<ParamPage />} />
                <Route path=":name" element={<ParamPage />} />
            </Route>

            {/* /redirect를 입력하면 RedirectPage 오픈 */}
            <Route path="/redirect" element={<RedirectPage />} />

            {/* 정의되지 않은 나머지 모든 url을 입력하면 NotFoundPage 오픈 */}
            <Route path="*" element={<NotFoundPage />} />
        </Routes>
    );
};

export default App;

 

 

 

페이지 이동하기 (1) - useNavigate

 

useNavigate는 주로 함수 내부에서 페이지 이동을 할 때 자주 사용됩니다.

 

보통 useEffect에서나 또는 click event가 수행될 때 페이지 이동을 하고 싶다면 useNavigate를 활용해주시면 됩니다.

 

사용 방법은 다음과 같이 useNavigate를 호출하여 파라미터 값에 이동을 원하는 url을 넣어주시면 됩니다.

 

import React, { useEffect } from 'react';
import { Route, Routes, useNavigate } from 'react-router';

...

const App = () => {
    const navigate = useNavigate();

    useEffect(() => {
        navigate('/link')
    }, [])

    return (
        ...
    );
};

export default App;

 

 

반응형

 

 

페이지 이동하기 (2) - Link

 

Link는 주로 a태그와 같이 화면에 페이지 이동이 가능한 링크 텍스트를 심어둘 때 사용합니다.

 

참고로 a태그와 동일한 역할을 하는 것이 아닌지에 대해서 의문이 드실 수 있겠지만, Link를 사용해야 CSR 방식으로 페이지 이동이 이루어지기 때문에 Link 사용을 권장드립니다.

 

사용 방법은 다음과 같습니다.

 

Link에서도 Route와 동일하게 상대경로를 사용할 수 있으니 상황에 맞게 때로는 절대 경로, 때로는 상대 경로를 활용해주시면 됩니다.

 

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

const LinkPage = () => {
    return (
        <div>
            <h2>LinkPage</h2>
            {/* 절대경로 사용 */}
            <Link to="/location">Location 페이지</Link> <br />
            {/* 상대경로 사용 */}
            <Link to="../">부모 페이지</Link> <br />
            <Link to="children">자식 페이지</Link> <br />
        </div>
    );
};

export default LinkPage;

 

 

 

페이지 이동하기 (3) - Naviagte

 

Navigate는 첫 번째로 설명드렸던 useNavigate와 유사해보이지만 사용 방법이 다릅니다.

 

Navigate는 useNavigate와 달리 컴포넌트로 등록하여 사용됩니다.

 

react-router의 이전 버전에서 <Redirect />대신 사용되는 요소로 자주 사용되진 않을 것 같지만 다음과 같이 사용할 수 있고, 해당 컴포넌트가 화면에 그려지는 상황이 발생되면 to에 등록한 url로 리디렉트가 이루어집니다.

 

import React from 'react';
import { Navigate } from 'react-router';

const RedirectPage = () => {
    return (
        <div>
            <h2>RedirectPage</h2>
            <Navigate to="/" />
        </div>
    );
};

export default RedirectPage;

 

 

 

URL 정보 확인 (1) - useParams

 

useParams의 URL로 넘어온 파라미터값을 확인할 때 사용합니다.

 

예를 들면 /param 페이지를 등록했을 때 /param/myName과 같이 url을 입력할 경우 myName의 값이 무엇인지를 확인할 수 있도록 도와줍니다.

 

useParams를 사용하기 전 위와 같이 url이 사용될 수 있도록 Route를 먼저 등록해주는 게 먼저이니, 위에서 ParamPage를 등록하는 Route를 먼저 확인해주시길 바랍니다.

 

Route설정이 완료되었다면 다음과 같이 useParams를 사용할 수 있습니다.

 

import React, { useEffect } from 'react';
import { useParams } from 'react-router';

const ParamPage = () => {
    const params = useParams();

    useEffect(() => {
        console.log(params);
    }, []);

    return (
        <div>
            <h2>ParamPage</h2>
        </div>
    );
};

export default ParamPage;

 

 

 

페이지를 접근해보면 다음과 같이 데이터를 확인할 수 있습니다.

 

실행 결과

 

 

 

URL 정보 확인 (2) - useLocation

 

useLoation은 현재 url의 경로가 어딘지와 url로 넘어온 queryString의 값이 무엇인지를 확인할 때 사용됩니다.

 

사용 방법은 다음과 같습니다.

 

import React, { useEffect } from 'react';
import { useLocation } from 'react-router';

const LocationPage = () => {
    const location = useLocation();

    useEffect(() => {
        console.log(location);
    }, []);

    return (
        <div>
            <h2>LocationPage</h2>
        </div>
    );
};

export default LocationPage;

 

 

728x90

 

 

페이지를 접근해보면 다음과 같이 pathname과 search값을 통해 원하는 데이터를 확인할 수 있습니다.

 

실행 결과

 

 

 

상위 Route Element 활용

 

위에 Route를 등록하는 코드를 확인해보면 paramPage쪽에 다음과 같이 되어있는 것을 확인할 수 있습니다.

 

<Route path="/param" element={<WrapperPage />}>
    <Route path="." element={<ParamPage />} />
    <Route path=":name" element={<ParamPage />} />
</Route>

 

 

 

여기서 보여드리려고 하는 건 상위 Route에 등록되어 있는 WrapperPage가 하위 Route에 등록된 모든 element의 wrapper로써 사용되는 것입니다.

 

이런 식으로 사용될 수 있는 대표적인 케이스가 Navigation, Header, Footer 등이 있을 것으로 보입니다.

 

 

 

WrapperPage를 만드는 방법은 다음과 같습니다.

 

WrapperPage에 원하는 코드를 작성하고 하위 Route의 컴포넌트들이 보일 위치에 <Outlet />을 작성해주시면 됩니다.

 

import React from 'react';
import { Outlet } from 'react-router';

const WrapperPage = () => {
    return (
        <div>
            <h1>WrapperPage</h1>
            <div>
                <Outlet />
            </div>
        </div>
    );
};

export default WrapperPage;

 

 

 

그러면 위의 예시에서 보였던 다음 화면과 같이 WrapperPage가 하위 Route 컴포넌트들의 wrapper로써 사용되는 것을 확인할 수 있습니다.

 

실행 결과

 

 

 

 

 

 

 

이상으로 react-router 사용하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.