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

SPA (Single Page Application)

• 단일 웹페이지로 돌아가는 애플리케이션 (index.html)
• 브라우저에서 JavaScript를 이용해 단일 웹페이지 상의 HTML 요소를 동적으로 생성하고 조작한다.
• 검색 엔진 최적화(SEO)에 적합하진 않다.
• React, Svelte, Vue.js와 같은 라이브러리 및 프레임워크로 개발을 할 수 있다.

---

React Router

• React에서 라우팅시 가장 많이 사용되는 라이브러리다.
  • 라우팅: 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것
• 개발자가 주소별로 다른 component를 보여주기 위해 사용된다.
• 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 component를 제공한다.
• 주요 component 및 hooks:
  • <BrowserRouter>
  • <Routes>
  • <Route>
  • <Link>
  • createBrowserRouter()
  • <RouterProvider>
  • <Outlet>
  • useOutletContext()
  • useParams()
  • useSearchParams()
  • useNavigate()

---

<BrowserRouter> 

• HTML5를 지원하는 브라우저의 주소를 감지한다.
• Router의 역할을 한다.
• 새로고침을 하지 않아도 새로운 component 렌더링을 해주는 기능을 담당한다.
• URL마다 component가 바뀔경우 바뀌는 부분의 최상단에 위치해야 한다.

// 블러오기
import { BrowserRouter } from 'react-router-dom';


// 사용하기
export default function ReactRouter() {
	return (
    	<>
        	<BrowserRouter>
            </BrowserRouter>
        </>
    );
};

---

<Routes>, <Route>

• 경로가 일치하는 component를 렌더링 해줄 수 있도록 경로를 매칭해 준다.
• <Routes>가 <Route>(들)를 감싸는 형태로 사용한다.
• <Route>에서는 구체적으로 어떤 component를 렌더링 할지 정의해 준다.
• path: 경로
• element: 연결 혹은 렌더링 할 component

// 블러오기
import { Route, Routes, BrowserRouter } from 'react-router-dom';


// 사용하기
export default function Router() {
	return (
    	<>
        	<BrowserRouter>
            	<Routes>
                	<Route path='/' element={<MainPage />} />
                    <Route path='/productlist' element={<ListPage />} />
                    <Route path='*' element={<ErrorPage />} />
                </Routes>
            </BrowserRouter>
        </>
    );
};

---

<Link>

• 경로를 변경할 때 사용된다.
• 기존 HTML의 <a> 태그와 달리 페이지 전체 새로고침을 하지 않고 해당하는 경로의 component를 렌더링 한다.
• to: 경로

// 블러오기
import { Link } from 'react-router-dom';


// 사용하기
export default function App() {
	return (
    	<>
        	<Link to='/'>
            	<h1>메인 component</h1>
            </Link>
        </>
    );
};

---

createBrowserRouter()

• JSX 기반인 <BrowserRouter>와 달리 createBrowserRouter()는 JavaScript로 라우팅을 정의한다.

 

라우팅 정의하기

• createBrowserRouter() 안에는 라우팅이 정의된 객체 배열이 들어간다.
• path 속성과 element 속성으로 어떤 경로에 어떤 component를 연결해 줄지 정의할 수 있다.
• children 속성에는 중첩된 라우터들을 같은 객체 배열 형태로 추가할 수 있다.
  • 자식 라우트에 경로를 지정할 때 앞에 '/' 없이 정의를 해줘야 부모의 URL뒤에 자식의 경로가 붙는다.

import { createBrowserRouter } from 'react-router-dom';
import Header from './Header';
import Home from './Home';
import About from './About';
import User from './User';
import Redirect from './Redirect';
import UserDetail from './UserDetail';
import NotFound from './404';
import App from '../230927/App';
import Error from './Error';
import Comment from './Comment';

const Router = createBrowserRouter([
	{
		path: '/',
		element: <App />,
		children: [
			{
				path: '',
				element: <Home />,
				errorElement: <Error />,
			},
			{
				path: 'about',
				element: <About />,
			},
			{
				path: 'redirect',
				element: <Redirect />,
			},
		],
		errorElement: <NotFound />,
	},
	{
		path: '/user',
		element: <App />,
		children: [
			{
				path: '',
				element: <User />,
			},
			{
				path: ':userid',
				element: <UserDetail />,
				children: [
					{
						path: 'comment',
						element: <Comment />,
					},
				],
			},
		],
	},
]);

export default Router;

 

정의된 라우팅 사용하기

• <RouterProvider>에 router props로 미리 정의해 준 라우터를 넣어준다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';

import Router from './12Router/Router';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<React.StrictMode>
		<RouterProvider router={Router} />
	</React.StrictMode>
);

---

<Outlet>

• 중첩 라우트 렌더싱시 라우트의 부모 라우터 component 내에서 사용되며, 해당 부모 라우트의 URL과 일치하는 자식 라우트 component를 렌더링 하게 해 준다.
• context props를 이용하여 자식 라우트에 데이터 전송이 가능하다.
• 자식 라우트에서는 useOutletContext() hook으로 해당 데이터에 접근할 수 있다.

import { Outlet } from 'react-router-dom';
import Header from '../12Router/Header';

export default function App() {
	return (
		<>
			<Header />
			<Outlet context={{data: 'hi'}}/>
		</>
	);
}

import { useOutletContext } from 'react-router-dom';


export default function User() {
	const context = useOutletContext();
	return (
		<div>
			{context.data} {/* hi */}
		</div>
	);
}

---

useParams()

• URL에 " : " 를 사용해 설정되는 파라미터 데이터에 접근할 수 있다.

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

// 경로가 /product/:type 로 정의된 라우터에 /product/laptop 으로 접근할 경우,
const { type } = useParams();
console.log(type); // laptop

---

useSearchParams()

• URL의 쿼리스트링 값에 접근하거나 값을 설정할 수 있다.

import { useSearchParams } from 'react-router-dom';

const [searchParams, setSearchParams] = useSearchParams();

// 쿼리스트링이 다음과 같을 경우, localhost:3000/?type=Laptop

// 값에 접근
const type = searchParams.get('type')
console.log(type) // Laptop

// 값 설정
setSearchParams({type: 'Tablet'}) // localhost:3000/?type=Tablet

---

useNavigate()

• <Link>를 사용하지 않고 사용자를 다른 페이지로 이동시킬 수 있다.
• 양수와 음수로 앞으로 가기, 뒤로 가기로도 설정할 수 있다.

import { useNavigate } from 'react-router-dom'

const navigate = useNavigate();

---

느낀 점들

React의 라우터 설정은 SPA로 설정되기에 기존에 해왔던 MPA(Multi Page Application)의 라우터 설정보다 훨씬 복잡한 거 같다. 사용가능한 hook들과 component들이 엄청 많고 각자 고유한 옵션들을 받기에 공식 문서를 자주 참고하면서 개발을 해볼 예정이다.