React-router-dom v6 #1

• 내가 듣고 있는 강의는 v5.3.4 버전으로 진행된다. 하지만 나는 최신버전 v6.4.2 버전을 사용하므로 다른 점이 있기에 그 점에 대해 공부해보기로한다.

---

React-router-dom

React는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 SPA(Single Page Application) 이다.
React-router-dom은 SPA에서 화면 전환을 위해 사용하는 모듈!
즉, 리액트를 사용하며 페이지를 이동할 때 필요한 라이브러리이다.

• 설치

npm i react-router-dom

---

BrowserRouter 와 createBrowserRouter 차이

BrowserRouter

• <Link> 태그를 통해 to 속성에 이동할 경로를 추가하여 이동시킨다.

• 주로 동적인 페이지에서 사용된다.

• BrowserRouter는 Link 태그를 사용하여 URL을 이동하며 페이지를 불러오는 것이 아닌, 단순히 주소만 바꿔주며 컴포넌트들을 렌더링하는 역할을 한다.
  그렇기에 새로고침을 하게 되면 해당 페이지를 찾지 못하기 때문에 에러가 발생할 수 있다.

• 예시

-- Router.tsx

import { Link, BrowserRouter, Routes, Route } from "react-router-dom";

<BrowserRouter>
	<Header /> 
    <Routes>   // → 구) Switch
      <Route path="/" element={<Home />} />  
      <Route path="/about" element={<About />} />
    </Routes>
</BrowserRouter>

-- App.tsx

function App() {
	return (
    	<div>
        	<Router />
        </div>
    );
}

-- index.tsx

.
.
.
root.render(
  <App />
);

---

createBrowserRouter

• 🚩 https://reactrouter.com/en/main/routers/create-browser-router#createbrowserrouter
• DOM History API를 사용하여 URL을 업데이트하고 기록 스택을 관리한다.
• Router 를 array 형식으로 표현하며 부모 path 와 자식 path 를 갖는다.

-- Router.tsx

import { LcreateBrowserRouter } from "react-router-dom";
import Root from "./Root";

const router = createBrowserRouter([
  {
    path:"/",    // → 부모 path
    element: <Root />,
    children: [
      {
        path:"",   // → 자식 path
        element: <Home />,
      },
      {
        path:"about",   // → 자식 path
        element: <About />,
      },
    ],
  },
])

export default router;

-- Root.tsx (구_App.tsx)

function Root() {
	return (
    	<div>
          <Header /> 
          <Outlet />   // → 중첩 라우터를 불러옴
        </div>
    );
}

-- index.tsx

import router from "./Router";

.
.
.
root.render(
  <RouterProvider router={router}/>
);

• 만약, 내가 "/about" 주소로 가려한다면?
  1. 'Router.tsx' 의 router 가 실행되면서, 부모 path 의 element 인 <Root /> 가 읽힌다.(렌더링 됨)
  2. 그럼 리액트 라우터가 'Root.tsx' > Root() 함수 안에 있는 <Outlet /> 을 <About /> 으로 대체한다.
  3. 짜잔~ <About /> 이 렌더링되며 "/about" 페이지가 띄워진다.
  4. 즉, <Outlet /> 이 내가 render 하고자하는 route 로 바꿔주는 것

• • <Header /> 컴포넌트와, <Home /> 컴포넌트

• <Header /> 컴포넌트와, <About /> 컴포넌트

---

errorElement

경로에 대한 일반 렌더링 경로() 대신 loader, action 또는 컴포넌트 렌더링에서 예외가 발생하면
오류 경로가 렌더링되고, 오류는 useRouteError로 사용한다.
※ 이 기능은 createBrowserRouter 와 같은 데이터 라우터를 사용하는 경우에만 작동한다.

• 즉, 우리 컴포넌트에서 에러가 발생해서 충돌하거나, 컴포넌트의 위치를 찾지 못할 때 사용하는 것인데
• 장점으로는, 에러가 발생한 컴포넌트 외에 다른 컴포넌트에서 발생하는 문제로부터 보호해준다는 것이다.
• 문제가 발생한 path 에 대해서만 errorElement 를 렌더링하고, 정상적인 path 들은 문제 없이 컴포넌트를 렌더링해 화면에 보여준다.

 {
  path: "",
  element: < Home />,
  errorElement: < ErrorComponent />,
 },

-- ErrorComponent.tsx

function ErrorComponent() {
  return <h1> 404 Not Found.<h1>
}

export default ErrorComponent;

• 존재하지 않는 router 로 접속하였을 경우
  

---

useNavigate

Link 는 클릭 시 특정 주소로 유저를 이동해주는 태그였다면,
Navigate 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어준다.
유저가 특정 페이지로 이동하였으나 접근 권한이 없을 때 등등에 사용된다.

• 예시)

function Header() {
  const navigate = useNavigate();
  const onAboutClick = () => {
    navigate("/about");
  };
  return (
  	.
    .
    .
    <button onClick={onAboutClick}> About </button>

---

• 공식 🚩 https://reactrouter.com/en/main