라우팅이란?

라우팅이란? 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미 합니다.

웹 애플리케이션을 만들 때 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지로 구성할 수도 있습니다.

예를 들어 블로그를 만드는 경우를 가정해 보면,

• 글쓰기 페이지 : 새로운 포스트를 작성하는 페이지 입니다.
• 포스트 목록 페이지 : 블로그에 작성된 여러 포스트의 목록을 보여주는 페이지 입니다.
• 포스트 읽기 페이지 : 하나의 포스트를 보여주는 페이지 입니다.

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

리액트 라우터를 사용하면 손쉽게 리액트 라우터로 싱글페이즈 애플리케이션(Single Page Application)을 만들 수 있습니다.

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

$ yarn create react-app kh-router-ex

$ cd kh-router-ex

$ yarn add react-router-dom

프로젝트에 라우터 적용

src/index.js

react-router-dom에 내장되어 있는 BrowserRouter를 사용하여 감싸면 됩니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

페이지 컴포넌트 만들기

src 디렉토리에 pages 경로를 만들고, 파일 생성

src/pages/Home.js

const Home = () => {
    return (
        <div>
            <h1>여기가 홈 입니다.</h1>
            <p>가장 먼저 보여지는 페이지 입니다.</p>
        </div>
    )
}
export default Home;

src/pages/About.js

const About = () => {
    return (
        <div>
            <h1>소개</h1>
            <p>리액트 라우터를 사용해 보는 프로젝트 입니다.</p>
        </div>
    )
}
export default About;

Route 컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기

사용자의 브라우저 주소 경로에 따라 우리가 원하는 컴포넌트를 보여주려면 Router라는 컴포넌트를 통해 라우트 설정을 해주어야 합니다.

<Route path=”주소 규칙” element={보여 줄 컴포넌트 JSX} />

Router 컴포넌트는 Routers 컴포넌트 내부에서 사용되어야 합니다.

import './App.css';
import About from './pages/About';
import Home from './pages/Home';
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/About" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

Link 컴포넌트를 사용

Link 컴포넌트를 사용하여 다른 페이지로 이동하는 링크를 보여주는 방법 입니다.

웹 페이지에서는 원래 링크를 보여 줄 때 a 태그를 사용하는데 리액트 라우터를 사용하는 프로젝트에서는 a태그를 바로 사용하면 안됩니다. a태그를 클릭하여 페이지를 이동할 때 브라우저에서는 페이지를 새로 불러오게 되기 때문 입니다.

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

src/pages/Home.js

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

const Home = () => {
    return (
        <div>
            <h1>여기가 홈 입니다.</h1>
            <p>가장 먼저 보여지는 페이지 입니다.</p>
            <Link to="/about">소개</Link>
        </div>
    )
}
export default Home;

URL 파라미터와 쿼리스트링

URL 파라미터와 쿼리 스트링은 둘 다 URL에 데이터를 전달하기 위한 방법입니다.

• URL 파라미터 예시 : /profile/frontend
• 쿼리스트링 예시 : /articles?page=1&keyword=react

URL 파라미터는 주소의 경로에 유동적인 값을 넣는 형태고, 쿼리스트링은 주소 뒷부분에 ? 문자열 이후에 key=value로 값을 정의하며 &로 구분하는 형태 입니다.

URL 파라미터는 주로 ID 또는 이름을 사용하여 특정 데이터를 조회할 때 사용하고, 쿼리스트링은 키워드 검색, 페이지네이션, 정렬 방식 등 데이터 조회에 필요한 옵션을 전달 할 때 사용합니다.

URL 파라미터

• useParams는 리액트 라우터에서 URL 파라미터 값을 가져오기 위한 훅(Hook)입니다.
• URL 파라미터는 useParams라는 Hook을 사용하여 객체 형태로 조회할 수 있습니다. URL 파라미터의 이름은 라우트 설정 할 때 Route 컴포넌트의 path props를 통해 설정 합니다.
• :username부분은 호출하는 페이지에서 지정한 유동적인 값으로 대체되어 컴포넌트에 전달됩니다.

Profile.js

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

const data = {
	frontend: {
		name: "곰돌이사육사",
		description: "리액트를 좋아하는 개발자",
	},
	backend: {
		name: "달빛사냥꾼",
		description: "스프링 부트를 좋아하는 개발자"
	},
};

const Profile = () => {
	const params = useParams();
	const profile = data[params.username];

	return(
		<div>
            <h1>사용자 프로필</h1>
            {profile ? (<div>
                <h2>{profile.name}</h2>
                <p>{profile.description}</p>
                </div>
                ) : (<p>존재하지 않는 프로필 입니다.</p>)
            }
		</div>
	);
};

export default Profile;

App.js

import './App.css';
import About from './pages/About';
import Home from './pages/Home';
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/About" element={<About />} />
        <Route path="/profiles/:username" element={<Profile />} />
      </Routes>
    </Router>
  );
}

export default App;

Home.js

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

const Home = () => {
    return (
        <div>
            <h1>여기가 홈 입니다.</h1>
            <p>가장 먼저 보여지는 페이지 입니다.</p>
            <Link to="/about">소개</Link>
						<ul>
                <li>
                    <Link to="/profiles/frontend">Frontend 프로필</Link>
                </li>
                <li>
                    <Link to="/profiles/backend">Backend 프로필</Link>
                </li>

            </ul>
        </div>
    )
}
export default Home;

useNavigate

useNavigate는 Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 하는 상황에 사용하는 Hook입니다.

Home.js

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

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

    return (
        <>
            <h1>여기는 홈 입니다.</h1>
            <p>가장 먼저 보이는 페이지 입니다.</p>
            <Link to="/about">소개</Link>
            <p style={{ textDecoration: 'underline' }} onClick={()=>navigate("/about")}>소개페이지로 이동</p>
        </>
    );
};

export default Home;

About.js

import React from "react";
import { useNavigate  } from "react-router-dom";

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

    return (
        <>
            <h1>소개 페이지 입니다.</h1>
            <p>리액트 라우터를 사용해 보는 프로젝트 입니다.</p>
            <button onClick={()=>navigate(-1)}>뒤로 가기</button>
        </>
    );
};

export default About;

Navigate 컴포넌트

Navigator 컴포넌트는 텀포넌트 화면에 보여주는 순단 다른 페이지로 이동을 하고 싶을 때 사용하는 컴포넌트 입니다. 즉, 페이지를 리다이렉트하고 싶을 때 사용 합니다.

• replace={true}는 브라우저의 주소 표시줄의 내용을 바꾸지 않고 이동할 수 있도록 설정하는 옵션입니다.
• 이러한 방식으로 <Navigate>컴포넌트를 사용하면, 일반적으로 사용되는 <a>태그나 window.location등의 다른 방법보다 라우터의 상태를 유지하면서 효과적으로 URL을 변경할 수 있습니다.

Login.js

const Login = () => {
	return <div>로그인 페이지</div>;
};

MyPage.js

import { Navigate } from "react-router-dom";
const MyPage = () => {
	const isLogin = false;

	if(!isLogin) {
		return <Navigate to="/login" replace={true} />;
	}
	return <div>마이페이지</div>
};
export default MyPage;