[포스코x코딩온] 웹 풀스택 과정 13주차 회고 | React Router

 

📌 SPA

SPA (Single Page Application)는 단일 웹페이지로 돌아가는 애플리케이션을 의미한다.
React, Svelete, Vue.js 와 같은 라이브러리로 개발 가능하다.

📌 MPA

MPA (Multi Page Agglication)는 여러 페이지를 만들고 각 요청에 따라 적절한 페이지를 보여주는 방식을 의미한다.

📌 React Router

• 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리이다.
• 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다. (BrowserRouter, Routes, Route, Lik, createBrowserRouter 등)
• 설치하여 사용한다. (npm i react-router-dom)

💡 BrowserRouter, Routes, Route

1) BrowserRouter

• 새로운 컴포넌트를 렌더링해주는 기능을 담당한다.
• url마다 컴포넌트가 바뀔 때, 바뀌는 부분의 최상단에 위치해야 한다.

2) Routes, Route

• 경로가 일치하는 컴포넌트가 렌더링되도록, 경로를 매칭한다.
• 구체적으로 어떤 컴포넌트를 렌더링할지 Route에서 결정한다.

export default function Router () {
  return (
    <>
      <BrowserRouter>
        <Header/>
        <Routes>
          <Route path="/" element={<Home/>}/>
          <Route path="/user" element={<User/>}/>
          <Route path="/user/:userId" element={<UserDetail/>}/>
          <Route path="*" element={<NotFount/>}/>
        </Routes>
      </BrowserRouter>
    </>
  )
}

💡 Link

• 경로를 변경한다.
• 새로고침 없이 (페이지 전환 없이) 컴포넌트만 이동한다는 점에서, a태그와 차이점이 있다.

.
.
.
<div>
  <Link to="/">Home</Link>
  <Link to="/user">User</Link>
</div>
.
.

💡 createBrowserRouter

• 경로에 따른 컴포넌트 지정을 모두 한번에 다룰 수 있다. (이전 BrowserRouter보다 더 보편적으로 쓰이고 있다.)
• errorElement으로 오류 발생 시, 렌더링 될 컴포넌트를 설정할 수 있다.
• 각 컴포넌트 별로 errorElement도 설정해야, 해당 컴포넌트에서 오류가 발생했을 때 서버가 멈추는 것을 방지할 수 있다.

import { createBrowserRouter } from 'react-router-dom';
const Router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "",
        element: <Home />
        errorElement: <Error />
      },
      {
        path: "/redirect",
        element: <Redirect />,
        errorElement: <Error />
      },
    ]
    errorElement: <NotFount />
  },
  {
    path: "/user",
    element: <App />,
    childrent: [
      {
        path: "",
        element: <User />,
        errorElement: <Error />
      },
      {
        path: ":userId",
        element: <UserDetail />,
        // 아래의 <Outlet>으로 자식 컴포넌트 받아올 수 있다.
        children: [
          path: "comment",
          element: <Comment />
        ],
        errorElement: <Error />
      }
    ]
  }
])
export default Router;;

💡 Outlet

• 부모 라우트 컴포넌트는 <Outlet/>으로 자식 라우트 컴포넌트를 받아 렌더링한다.
• context를 이용하여 자식 라우트에 데이터를 전송할 수 있다. (자식 라우트에서는 useOutletContext()로 받아와야 한다.)

// UserDetail.js
import { Link, Outlet, useParams } from 'react-router-dom';
import { users } from './User'; // User.js에서 users 배열 받아온다.
export default function UserDetail() {
  const { userId } = useParams();
  // Route에서 설정한 path의 :userId를 읽어온다.
  return (
    <>
      <div>
        <Link to="comment">Comment</Link>
        <Outlet context={{ comment: users[Number(userId) -1].comment }} />
      </div>
    </>
  )
}

// Comment.js
import { useOutletContext }  from 'react-router-dom';
export default function Comment() {
  const { comment } = useOutletContext();
  return (
    <div>
      {comment.map((value, idx) => {
        return <div key={idx}>{value.text}</div>
      })}
    </div>
  )
}

💡 URL 파라미터 - useParams

•  : 를 사용해 설정한 경로에서, 해당 파라미터를 읽어온다.
• URL 파라미터가 여러 개인 경우, /product/:id/:name 처럼 설정한다.

const { userId } = useParams();
// 객체 구조분해 할당으로 바로 값을 받아온 것이다.

💡 URL 쿼리스트링 - useSearchParams

const [searchParams, setSearchParams] = useSearchParams();

• searchParams: 쿼리스트링 값을 가져온다.
• setSearchParams: 쿼리스트링 값을 할당한다.

  console.log(searchParams.get("name"));
  // localhost:3000/user/?name=hello&mode=Dark 입력 시,
  // 콘솔창: hello

💡 페이지이동 - useNavigate()

• Link 컴포넌트를 이용하지 않고 다른 페이지로 이동해야 하는 경우 or 뒤로 가기 등에 사용한다.
• 경로를 직접 설정하거나, 숫자를 입력하여 앞/뒤 페이지를 이동할 수 있다.

export default function Redirect() {
  const navi = useNavigate();
  useEffect (() => {
    navi("/user");
  // "/"를 앞에 써주면, 절대경로
  // (localhost:3000/user)
  // "/" 없이 쓰면, 계속 이어서 경로가 설정된다.
  // (localhost:3000/redirect/user)
    // navi(-1); // 1페이지만큼 뒤로가기
  },[]);
  return <div>Redirect</div>
}