풀스택 웹개발 부트캠프 13주차 (2)

React Router

• 개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리
• 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트 제공
• 주요 컴포넌트
  • BrowserRouter
  • Routes
  • Route
  • Link
  • createBrowserRouter

npm i react-router-dom@6

SPA

• Single Page Application
  • cf) MPA (Multi Page Application)
• 단일 웹페이지로 돌아가는 어플리케이션
• 브라우저에서 javascript를 이용해 단일 웹페이지 상의 HTML 요소를 동적으로 생성 및 조작
• 검색 엔진 최적화 (SEO) 에는 적합 ❌
  • cf) 리액트의 단점을 보완한 것이 next.js (검색 엔진 최적화 ⭕)

Routing

• 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것
• React Router 라이브러리가 가장 많이 사용됨
• 새로고침 ❌
• 기존 컴포넌트를 지우고, 새로운 컴포넌트를 불러옴
• 새로고침하지 않고 이동하도록 만드는 것이 리액트의 핵심

BrowserRouter

• HTML5를 지원하는 브라우저의 주소 감지
• Router의 역할
• 새로고침을 하지 않아도 새로운 컴포넌트를 렌더링해줌
• URL마다 컴포넌트가 바뀔 때, 바뀌는 부분의 최상단에 위치해야 함

import { BrowserRouter } from "react-router-dom";

const ReactRouter = () => {
	return (
      <div>
      	<BrowserRouter>
      	</BrowserRouter>
      </div>
    );
};

Routes, Route

• 경로가 일치하는 컴포넌트를 렌더링해주도록 경로 매칭
• Route에서는 구체적으로 어떤 컴포넌트를 렌더링할 것인지 결정

<Routes>
  <Route path="/" element={<Main />}</Route>
  <Route path="/product/:id" element={<Product />}</Route>
  <Route path="*" element={<NotFound />}</Route>
</Routes>

• path : 경로
• element : 연결할 컴포넌트
• url이 계속 뒤에 붙도록 만들 때 : / 생략
• 절대 경로로 이동하도록 만들 때 : /user 와 같이 입력

Link

• 경로를 변경
• 기존 HTML의 a 태그는 새로고침하여 렌더링 수행
• Link 컴포넌트는 페이지 전환 방지

<Link to="/">
  <h1>헤더입니다.</h1>
</Link>

createBrowserRouter

• 사용성, 확장성 측면에서 createBrowserRouter가 더 좋음

import { createBrowserRouter } from "react-router-dom";

const Router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
    	{
    		path: "about",
    		element: <About />,
  		},
  		{
          	path: "",
          	element: <Home />,
          	errorElement: <Error />,
        },
  	],
    errorElement: <NotFound />,
  }
]);

Outlet

• 중첩 라우트 렌더링
• 중첩 라우트의 부모 라우트 컴포넌트 내에서 사용
• 해당 부모 라우트의 url과 일치하는 자식 라우트 컴포넌트 렌더링
• context를 이용하여 자식 라우트에 데이터 전송 가능 - 자식 라우트에서는 useOutletContext( ) 사용

function App() {
  return (
    <>
    	<Header />
    	<Outlet />
    </>
  );
}

react-router-dom Hooks

useParams

• ex) /product/:id
• 경로에 : 를 사용하여 설정
• url 파라미터가 여러 개인 경우 → /product/:id/:name 과 같이 설정

import { useParams } from "react-router-dom";

// const 변수명 = useParams().파라미터명;
const { 파라미터명 } = useParams();

useSearchParams

• queryString은 페이지 이동 ❌ 정보만 받는 것 ⭕

// localhost:3000/?mode=Dark
const [searchParams, setSearchParams] = useSearchParams();

searchParams.get("mode");
set SearchParms({ mode: "Dark" });

• searchParams : queryString 값을 가져옴
• setSearchParams : queryString 값을 할당

useNavigate

• Link 컴포넌트를 사용하지 않고 사용자를 어딘가로 이동시키는 기능
• 다른 페이지로 이동, 뒤로 가기 등에 사용

const navigate = useNavigate();

<button onClick={() => navigate(-1)}Go back</button>
<button onClick={() => navigate(1)}Go forward</button>
<button onClick={() => navigate("/")}Go Root</button>