React Router

리액트는 SPA(Single Page Application) 방식으로 하나의 페이지로만 구성되어 있기 때문에 React Router 라이브러리를 사용하여야 경로에 따라 다른 페이지를 보여줄 수 있다.

SPA란?

• Single Page Application
• 단일 웹 페이지로 돌아가는 어플리케이션
• 하나의 페이지에서 자바스크립트를 이용해 HTML 요소를 동적으로 바꿔주는 것
• React, Svelte, Vue.js와 같은 라이브러리로 개발 가능
  
  

라우팅 (Routing)이란?

• 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것
• React Router : 개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리
  
  

리액트 라우터 (React Router)

• BrouserRouter : 새로고침을 하지 않아도 새로운 컴포넌트를 렌더링 해주는 기능 담당
• Routes, Route : 경로가 일치하는 컴포넌트를 렌더링 해주도록 경로 매칭
• Link : 경로 변경, 기존 HTML의 a태그 는 새로고침을 통해 렌더링을 수행하였지만, Link 컴포넌트는 페이지 전환을 방지한다.

리액트 라우터 설치

$ npm install react-router-dom

App.js

import PracticeRouter from './PracticeRouter';

function App() {
    return (
        <div>
            <PracticeRouter />
        </div>
    )
}

export default App;

PracticeRouter.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import PracticeMain from './PracticeMain';
import Student from './Student';

const ReactRouter = () => {
    return (
        <div>
      		// BrowserRouter는 URL마다 컴포넌트가 바뀔 때 바뀌는 부분의 최상단에 위치해야 한다.
            <BrowserRouter>
      			// Route에서는 구체적으로 어떤 컴포넌트를 렌더링할지 결정
                <Routes>
                    <Route path="/" element={<PracticeMain />} />
					// URL 파라미터
					// 여러 개인 경우에는 /student/:name/:id 처럼 설정
                    <Route path="/student/:name" element={<Student />} />
                </Routes>
            </BrowserRouter>
        </div>
    )
}

export default ReactRouter;

PracticeMain.js

import { Link } from 'react-router-dom';
import './Practice.css';

function Main() {
    return (
        <div class="container">
            <Link to="/"><h2>ReactRouter 실습</h2></Link>
            
            <nav>
                <ul>
       				// name <- sesac
                    <li><Link to="/student/sesac">학생 SeSAC</Link></li>
      				// name <- codingon
                    <li><Link to="/student/codingon">코딩온</Link></li>
       				// name <- new
                    <li><Link to="/student/new?name=sesac&key=id#codingon">searchParams</Link></li>
                </ul>
            </nav>
        </div>
    )
}

export default Main;

Student.js

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

const Student = () => {
  	// useParams를 통해 파라미터의 값을 가져올 수 있다.
    const { name } = useParams();
    const navigate = useNavigate();
    const [searchParams, setSearchParams] = useSearchParams();

    return (
        <div className="containers">
            <p>학생의 이름은 <span>{name}</span> 입니다</p>
            {searchParams != "" && <p>실제 이름은 <span className="name">{searchParams.get("name")}</span></p>}
            <button onClick={() => navigate(-1)}>이전페이지로</button>
        </div>
    )
}

export default Student;

useParams, useLocation, useSearchParams, useNavigate

• useParams : URL 파라미터 값을 가져온다.
• useLocation : location 객체에 URL 쿼리스트링의 정보가 담긴다.
• useSearchParams : URL 쿼리스트링의 원하는 파라미터 값을 가져올 수 있다.
• useNavigate : Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 하는 경우, 뒤로가기 등에 사용한다.

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

function Product() {
    // const new_id = useParams().id => 새로운 이름으로 가져오기
    const { id } = useParams();
    const location = useLocation();
    const [searchParams, setSearchParams] = useSearchParams();
    const navigate = useNavigate();
  
    return (
        <div>
            <h1>{id}번 Product</h1>

            <ul>
                {/* # */}
                <li>hash: {location.hash}</li>
                {/* 현재 경로 (쿼리 제외) */}
                <li>pathname: {location.pathname}</li>
                {/* 쿼리 스트링 (물음표 포함) */}
                <li>search: {location.search}</li>
                {/* 상태값 */}
                <li>state: {location.state}</li>
                {/* location 객체의 고유값 */}
                <li>key: {location.key}</li>
            </ul>

            <ul>
                // searchabc 이런식의 문자열 형태로 담긴다
                <li>keyWords : {searchParams}</li>
				// search=abc -> abc
                <li>keyWord : {searchParams.get("search")}</li>
            </ul>

            <ul>
                <li><button onClick={() => navigate(-2)}>Go 2 pages back</button></li>
                <li><button onClick={() => navigate(-1)}>Go back</button></li>
                <li><button onClick={() => navigate(1)}>Go forward</button></li>
                <li><button onClick={() => navigate(2)}>Go 2 pages forward</button></li>
                <li><button onClick={() => navigate('/')}>Go Root</button></li>
                {/* state값 전달 */}
                <li><button onClick={() => navigate('/', {state: 'a'})}>Go Root2</button></li>
            </ul>
        </div>
    )
}

export default Product;