🔮 React - 10. 리액트 라우터로 SPA

라우팅이란?

• 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것
• 웹 애플리케이션을 만들 때 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지로 구성할 수도 있습니다.
• 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트를 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템 입니다.

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

---

SPA는 이름 그대로 페이지 하나로 돌아가는 애플리케이션이기 때문에 페이지 이동시 버벅임 없이 부드럽게 전환되지만,

웹 페이지 정보가 없기 때문에 SEO에는 매우 취약합니다. 허나 이는 HTML meta태그에 정보를 올리면 되어서 크게 걱정할 정도는 아닙니다.

최근에는 이런 SEO에 약하다는 단점을 보완하기 위해 서버 사이드 렌더링을 이용한 Next.js가 많이 쓰이곤 합니다.

그리고, 정보를 한번에 다 불러와야 하기 때문에 첫 페이지 로딩 시간이 길어질 수 있습니다.

---

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

$ yarn create react-app [폴더명]

$ cd [폴더명]

$ yarn add react-router-dom

프로젝트에 라우터 적용

src/index.js

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

src/pages/Home.js

👉 src 디렉토리에 Pages 폴더 만들고, 하위 파일 생성

import React from "react";

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

src/pages/About.js

import React from "react";

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

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

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

⬇️

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 컴포넌트 사용

웹 페이지에서는 원래 링크를 보여줄 때 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 파라미터

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

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 입니다.

useNavigate는 리액트 문법이라 다 적용되어 많이 쓰입니다.
내부적으로 stack 구조(LIFO)이기 때문에 -1 하면 이전 페이지로 이동합니다.

Link 컴포넌트를 사용하다가 문제가 생기는 경우가 있음.
이럴 때는 useNavigate를 사용..

 

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 컴포넌트 (리다이렉션)

Navigate 컴포넌트는 화면에 보여주는 순간 다른 페이지로 이동을 하고 싶을 때 사용합니다.

즉, 페이지를 리다이렉션 하고 싶을 때 사용합니다.

예) 마이페이지 눌렀을 때 로그인 안되어있으면 바로 로그인 페이지로 이동(리다이렉션)

• 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;