REACT 라우터를 설치하고 사용해보자

mdn에서 라우터를 3가지로 정의한다.

• 네트워크 계층에서, 라우터는 데이터 패킷 방향을 결정하는 네트워크 장치입니다. 라우터는 사용자가 인터넷과 상호작용할 수 있도록 관련 업체에서 배포합니다.
  
  
• 애플리케이션 계층에서, Single-page application의 경우, 라우터는 주어진 URL로 표시되는 웹 페이지를 결정하는 라이브러리입니다. 이 미들웨어 모듈은 다음 페이지를 열기 위해 렌더링 되는 파일에 대한 경로가 제공되는 모든 URL 기능에 사용됩니다.
  
  
• 서비스 계층의 API 구현에서, 라우터는 요청을 구문 분석하고 요청을 프로그램 내의 다양한 핸들러로 보내거나 라우팅하는 소프트웨어 구성 요소입니다. 라우터 코드는 일반적으로 처리기의 응답을 수락하고 요청자에게 반환하는 것을 용이하게 합니다.

react에서 라우터는 페이지를 새로고침하지 않아도 url을 이용하여 빠르게 화면을 전환 할 수 있도록 사용할 수 있는 기능인 것 인 것 인 것 인 것 같다 (확신 없음)

그럼 라우터를 react에서 사용해보자!

---

라우터 설치하기

• 터미널에 아래와 같은 명령어를 입력한다.
  npm install react-router-dom

• 정상적으로 설치가 완료 되면,
  package.json 파일에 "react-router-dom": "^6.18.0"이 생성된다.

• 그리고 파일 맨 상단에 아래 줄 추가해주기!
  import { HashRouter as Router, Routes, Route, Link, useParams } from "react-router-dom"

이제 라우터를 사용할 준비가 완료 되었다!

---

라우터 사용해보기

기존 HTML은 링크를 연결해 주기 위해 a href=" "를 사용해주었다.

리액트에서는 대신 Link to=" "로 사용한다. 이름이 훨씬 직관적이다!

먼저 메인 컴포넌트와 그 안에 들어갈 컴포넌트 4개를 만들어보자.

📒 메인 컴포넌트

function Snippet() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/posts">Posts</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="posts" element={<Posts />} />
        <Route path="post/:postId" element={<Post />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  )
}

메인컴포넌트는 전체가 Router로 감싸져 있고 그안에는 nav메뉴와 Routes 로 나누어져있다.

nav에는 Link to="/" 등 으로 링크를 눌렀을 때 각각 요청할 url을 작성해주었다.

그리고 Routes 안에는 Route가 있다.

url값이 달라지면 그에 맞는 path 값을 가진 Route가 보여질 예정이다. 그리고 각각의 Route는 어떤 엘리먼트를 보여줄지 작성하였다.

📒 Post, Posts 컴포넌트

게시글 목록에는 게시글들의 주소를 적어주었다.

//게시물 목록
function Posts() {
  return (
    <>
      <h1>Posts</h1>
      <ul>
        <li><Link to="/post/p0">Post1</Link></li>
        <li><Link to="/post/p1">Post2</Link></li>
      </ul>
    </>
  )
}

useParams Hook 을 사용해보자

요청 URL의 인자에 접근할 수 있다.

Post 컴포넌트에서 p0, p1라고 한 url 뒷부분을 useParams()로 가져온다.

//게시물 보기
function Post() {

  const { postId } = useParams();

  return (
    <>
      <h1>Title</h1>
      <p>{postId}</p>
    </>
  )
}

📒 Home, About, 404 컴포넌트

3가지 페이지는 간단하게 넘어가자! 별 기능이 없다!

//홈
function Home() {
  return <h1>Home</h1>
}

//소개
function About() {
  return <h1>About</h1>
}

//404페이지
function NotFound() {
  return <h1>404 NotFound</h1>
}