react-router (React 라우팅 라이브러리)

1. SPA (Single-page application)

• 페이지를 바꿀 때마다 서버에서 받지말고 -> 첫 페이지 요청시에만 서버에서 html을 내려주고 -> 다른페이지는 페이지에 필요한 부분만 변경해서 보여준다.
• 즉, html은 하나지만, url은 여러개. 이때 필요한 것이 라우팅 처리.
• 라우팅: 어떤 url로 들어왔을때, 특정 페이지를 보여줘야해 (url에 따라 알맞은 콘텐츠(UI)를 전달해주는 기능)

2. react-router 란?

• react-router-dom(웹 개발)과 react-router-native(앱 개발) 기능이 모두 들어있는 라이브러리.

3. react-router-dom (웹 개발)

• BrowserRouter: history API를 사용해서, 브라우저url과 React앱을 연결해주는 역할
• Routes: 모든 Route태그를 감싼다
• Route: 어떤 url로 들어왔을때(path), 어떤 컴포넌트를 보여줄지 매칭(element)
• 기본 예시

// <!-- App.js --> // 부모 컴포넌트
import React from 'react';
import HomePage from './components/HomePage'
import { BrowserRouter } from 'react-router-dom'; // 1번) router를 사용하려는 컴포넌트를 감싼다 // router를 사용하기 위해서 필요한 단계 1
import ScrollTop from './routes/ScrollTop'

function App() {
  return (
    <BrowserRouter>
      <ScrollTop />
      <HomePage />
    </BrowserRouter>
  );
}

export default App;

// <!-- RouterView.js --> // routes (Vue에서는 routes폴더의 index.js)
import React from 'react';
import { Routes, Route } from 'react-router-dom'; // 2번) router를 사용하기 위해서 필요한 단계 2,3
import MainPage from './MainPage'; // 페이지는 routes폴더에 넣기
import TechPage from './TechPage';
import BlogPage from './BlogPage';
import JavascriptPage from './JavascriptPage';
import ReactPage from './ReactPage';
import ReactDocPage from './ReactDocPage';
import ErrorPage from './ErrorPage';

function RouterView() {
  return (
    <Routes>
      <Route path={"/"} element={<MainPage />} />    ---> http://localhost:3000/ (마지막/는 안보인다)

      // 3번) 중첩해서 사용 예시
      <Route path={"/tech"} element={<TechPage />}>    ---> http://localhost:3000/tech
        <Route path="react" element={<ReactPage />}>    ---> http://localhost:3000/tech/react
          <Route path="1" element={<ReactDocPage />} />    ---> http://localhost:3000/tech/react/1
          // 4번) :을 넣는 이유는? URL의 params를 설정할 때에는 ':무엇'의 형식으로 설정. 이렇게하면 '무엇'이라는 params가 생기는것!!!
          <Route path=":id" element={<BlogPage />} />
        </Route>
        <Route path="javascript" element={<JavascriptPage />} />
      </Route>

      <Route path={"/blog"} element={<BlogPage />} />    ---> http://localhost:3000/blog

      <Route path={'*'} element={<ErrorPage />} />
    </Routes>
  );
}

export default RouterView;

// 참고) default페이지로 어떤페이지를 설정하고 싶을때
// <Route index element={<MainPage />} />

// 3번 추가설명) <Outlet/>
// 만약 중첩해서 사용하고싶다면? 반드시 Outlet이 필요! (감싸고 있는 '어른태그'에 Outlet을 넣는다. 여기서는 TechPage.)
// 즉, /tech/react는, /tech 페이지 내용 + /react 페이지 내용으로, 추가되서 보이는 것이다. (뉴스에서 댓글 버튼 누르면, 밑에 댓글이 추가되어 보이는 형식)
// 이때, <Outlet/> 태그를 넣지 않으면, /react 페이지 내용은 아예 보이지도 않는다. (서로 독립적인 페이지가 되는 것이 아니다)
//
// 만약, /tech/react 페이지를 독립적으로 만들고 싶다면, path를 "/tech/react" 자체로 설정해야한다.
// <Route path={"/tech"} element={<TechPage />}> 하위에서 나와서,
// <Route path={"/tech/react"} element={<ReactPage />}> 이런식으로 설정해야 한다.

// <!-- HomePage.js --> // components
import React from 'react';
import Header from './Header'; // 컴포넌트는 components폴더에 넣기
import RouterView from '../routes/RouterView'
import Footer from './Footer';
import { Link } from 'react-router-dom'; // 5번) a태그를 대체한다

function App() {
  return (
    <>
      <Header />
      <div style={{display: 'flex'}}>    ---> 라우트 페이지의 크기를 한정시킬수도 있다
        // 6번) url주소에 따라 변화는 라우트 페이지가 출력되길 원하는 위치에, 컴포넌트 태그를 넣는다.
        <RouterView />    ---> 이 안에서 Link태그 사용은 당연히 가능하다 (이 자체가 BrowserRouter태그 하위에 있기때문에)
      </div>
      <Footer />
      <Link to="/blog">링크 연결해보자</Link>    ---> 페이지 이동 Link태그는, 반드시 BrowserRouter태그 안에서만 사용가능하다.
    </>
  );
}

export default App;

// 5번 추가설명) <Link to=?></Link>
// a태그는 기본적으로 페이지를 이동시키게 되어있어서, 새로운 페이지를 불러온다 (한 개의 페이지만 사용한다는 React의 장점을 의미없게 만든다)
// React에서는 a태그 대신 Link태그를 사용하는 것을 강추!
// 
// <Link to='정적인요소'></Link>
// <Link to={ 동적인요소 }></Link>
// <Link to={ '정적인요소' + 동적인요소 }></Link>

// <!-- TechPage.js --> // components
import React from 'react';
import { Outlet, Link  } from 'react-router-dom';

function TechPage(props) {

  return (
    <div>
      <h1>TechPage</h1>
      <Link to="/tech/react">React</Link> | <Link to="/tech/javascript">Javascript</Link>
      <Outlet />    ---> 7번) Outlet 태그는, 어른 컴포넌트의 return 부모 요소의, 가장 마지막 자식 요소로 넣어야 한다.
    </div>
  );
}

export default TechPage;

// <!-- ReactDocPage.js --> // components
import React from 'react';
import { useParams } from 'react-router-dom'; // 8번)

function ReactDocPage(props) {
  const params = useParams(); // 9번)

  console.log(params); // 10번) 결과가 { id: '3' } 이런식으로. (이때, params.id는 typeof string)

  return (
    <div>
      ReactDocPage #{ params.id }    ---> ReactDocPage #3
    </div>
  );
}

export default ReactDocPage;

4. 에러 페이지 (404 페이지)

• 만든 페이지 이외에 모든 페이지를, error페이지로

<Routes>
  // ex) 404 페이지
  // 상단에 위치하는 Route들을 모두 확인 후, 일치하는 Route가 없는경우에 처리하기때문에 -> Routes의 맨 마지막에 넣어준다
  <Route path={'*'} element={<ErrorPage />}></Route>    ---> ErrorPage도 직접만든 컴포넌트
</Routes>

• params를 이용한 error페이지 설정

// ex) https://react-project-vite-ts.vercel.app/product/30 과 같은 경우에,
// 20까지만 상품이 등록되어 있고, 그 이외에 숫자, 문자, 기호 등은 상품이 없을때,
// 해당페이지를 들어갈 경우 -> '상품 없음 : 30' 이라는 문구가 뜨길 바란다면?

<Routes>
  <Route path={"/"} element={<MainPage />} />

  <Route path={"/tech"} element={<TechPage />}>
    <Route path="react" element={<ReactPage />}>
      <Route path=":id" element={<ErrorPage />} />    ---> 1번) params로 해놓은 것들은 여기서 연결되고
    </Route>
    <Route path="javascript" element={<JavascriptPage />} />
  </Route>

  <Route path={"/blog"} element={<BlogPage />} />

  <Route path={'*'} element={<ErrorPage />} />    ---> 2번) 그 외의 나머지 페이지들은 ErrorPage로 간다
</Routes>

// 3번) 당연히, 설정해놓은 페이지들은, 각자 연결해놓은 element로 매칭되어있는 컴포넌트 페이지로 간다.