[React] Router

React 전통적인 방식의 단점을 보안하기 하며 SPA(Single Page Application)의 방식으로 하나의 페이지에서 컴포넌트를 렌더링하는 방식을 사용하고 있습니다.

전통적인 웹 애플리케이션 단점

• 페이지를 서버에서 렌더링하기 때문에 속도가 느리다.
• 서버의 부담 크다.
• 페이지 이동시 새로 렌더링하기 때문에 깜빡임이 생긴다
• 앱이 발전하면서 웹을 앱과 같이 사용하고 싶어짐

Routing

기존의 HTML은 URL 요청시 페이지 자체를 서버에서 다시 받아와 렌더링 하기 때문에 상관이 없습니다.

하지만 SPA는 페이지의 이동이 아닌 하나의 페이지에서 컴포넌트를 렌더링하기 때문에 Routing처리가 힘듭니다.

Routing을 도와주는 라이브러리중 하나로 “react-router”가 있습니다.

[공식 사이트] React Router

react-router

react-router는 React와 JS 어디서든 사용이 가능한 라이브러리입니다. (js, react, node)

• react-router : dom과 native를 포함합니다.
• react-router-dom : 웹 Routing을 지원합니다.
• react-router-native : 앱 Routing을 지원합니다.

npm install react-router

BrowserRouter

react-router에서 제공하는 컴포넌트중 하나입니다

• 브라우저의 현재 위치를 저장합니다
• 브라우저 history stack을 사용합니다.
• Routing을 하기 위해 최상단에 위치합니다.

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

const App = () => {
  
	return (
      <BrowserRouter></BrowserRouter>
    )
}

HashRouter
HashRouter도 BrowserRouter와 같은 기능을 동작하지만 URL에 #이 붙으며 정적페이지에 적합합니다.
#이 붙으며 검색 엔진으로 읽을 수 없습니다.

Routes & Route

<Routes>
<Route> 컴포넌트를 감싸는 컴포넌트입니다

<Route>
실제로 URL 요청에 따른 컴포넌트를 매칭하는 컴포넌트입니다.

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

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

const App = () => {
  
	return (
      <BrowserRouter>
      	<Routes>
      		<Route path={"/"} element={<Component/>}/>
		</Routes>
      </BrowserRouter>
    )
}

• path : 요청 path를 작성합니다.
• element : 요청에 해당하는 컴포넌트를 작성합니다.

중첩 URL

URL : /parents/child

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

<Routes>
	<Route path={"/parents"} element={<Parents/>}>
		<Route path={"/child"} element={<Child/>}>
	</Route>
</Routes>

Link

Link는 a tag를 대신하며 사용자가 클릭하거나 탭하여 다른 페이지로 이동할 수 있게 해주는 요소입니다.

• a tag는 페이지를 다시 받아옵니다 (새로고침)
  - a tag를 사용하려면 preventDefault를 사용해야합니다.
• Link 사용시 페이지의 새로고침 없이 SPA로 URL 변경이 가능합니다.

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

<Link to="/">router</Link>

Outlet

하위 경로 요소를 렌더링하며 중첩된 UI를 나타나게 합니다.

Route를 통해 중첩 URL을 작성했을 경우 자식 컴포넌트가 정상적으로 나오지 않는것을 확인 할 수 있습니다.

Outlet 요소를 사용하여 중첩된 UI를 나타나게할 수 있으며 컴포넌트가 표시될 위치를 정해줄 수 있습니다.

import React from "react";
import { Outlet } from "react-router-dom";

const PatantComponent = () => {
    return (
        <div>
            <h1>Parents</h1>
            <Outlet /> {/* children component */}
        </div>
    );
};

export default PatantComponent;

hook

useNavigate
Hook 함수로 프로그래밍 방식으로 URL 변경을 요청할 수 있습니다.

• Route안에서만 사용이 가능합니다
• window.location = ""과 비슷한 기능을 합니다.

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

const navigate = useNavigate();

const onClick = () => {
	navigate("/")
}

useParams
요청에 path로 넘어온 parameter값을 받아올 수 있습니다.

<Route path={":id"} element={<Child/>}/>

// children component
const prams = usePrams();

console.log(prams.id)