Routes
๋ผ์ฐํฐ๋?
๋ผ์ฐํ ์ ๊ตฌํํ๋ ๋๊ตฌ
URL๊ณผ ์ปดํฌ๋ํธ ๊ฐ์ ๋งคํ์ ๊ด๋ฆฌํ๊ณ , URL ๋ณ๊ฒฝ์ ๋ฐ๋ผ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋ง ์ํค๋ ์ญํ ์ ํ๋ค.
React Router
React์์ ๋ผ์ฐํ ์ ๊ตฌํํ๋๋ฐ ์ฌ์ฉ๋๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
Install
npm i react-router-dom
Browser Router
๋ธ๋ผ์ฐ์ ์ ๋ด์ฅ๋ ํ์คํ ๋ฆฌ๋ฅผ ํ์ ๋ฐ ์ ์ดํ๊ธฐ ์ํด ๋ด๋ถ์ ์ผ๋ก History API๋ฅผ ์ฌ์ฉํ์ฌ CSR ๋ผ์ฐํ ์ ๊ตฌํ
URL๊ณผ ๋งคํ๋๋ ํ์ด์ง ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋ง
history ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํด์ ๋ค๋ก๊ฐ๊ธฐ, ์์ผ๋ก๊ฐ๊ธฐ, ์๋ก๊ณ ์นจ๋ฑ์ ๋์์ ์ฒ๋ฆฌ
declare function BrowserRouter(
props: BrowserRouterProps
): React.ReactElement;
interface BrowserRouterProps {
basename?: string;
children?: React.ReactNode;
window?: Window;
}
// main.js
root.render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
);
};
Memory Router
Test ํ๊ฒฝ์์
BrowserRouter
๋์MemoryRouter
๋ฅผ ์ฌ์ฉํ์ฌ ๋ผ์ฐํ ํ๊ฒฝ ๊ตฌ์ถํ๋ค.๋ง ๊ทธ๋๋ก ๋ฉ๋ชจ๋ฆฌ ๋ด์์ ๋ผ์ฐํ
declare function MemoryRouter(
props: MemoryRouterProps
): React.ReactElement;
interface MemoryRouterProps {
basename?: string;
children?: React.ReactNode;
initialEntries?: InitialEntry[];
initialIndex?: number;
}
initialEntries โ ์ด๊ธฐ ์ํธ๋ฆฌ ๋ชฉ๋ก ์ค์ , ์ฆ ํ ์คํธํ ํ์ด์ง์ ์ฒซ ๋ ๋๋ง ๊ฒฝ๋ก ์ค์
๋ฐฐ์ด์ธ ์ด์ ๋ ๋ธ๋ผ์ฐ์ ํ์คํ ๋ฆฌ ์คํ๊ณผ ๋์ผ, (๋ค๋ก๊ฐ๊ธฐ, ์์ผ๋ก๊ฐ๊ธฐ ํ ์คํธ๋ฅผ ํ๊ธฐ ์ํจ)
initialIndex โ ์ด๊ธฐ ์ํธ๋ฆฌ ๋ชฉ๋ก[๋ฐฐ์ด] ์ค ์ธ๋ฑ์ค๋ฅผ ํตํด ๊ฒฝ๋ก๋ฅผ ์ ํ
import { MemoryRouter } from 'react-router-dom';
describe('App', () => {
it('render correctly', () => {
render(
<MemoryRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="/dashboard" element={<DashBoard />} />
</Routes>
</MemoryRouter>,
);
expect(screen.getByText(/์ด๋ค์/)).toBeInTheDocument();
});
});
ํจ์๋ก ์ถ์ถํด์ ์ฌ์ฌ์ฉ์ฑ์ ๋ํ๋ณด์
export function withRouter(routes, initialEntries = '/') {
return (
<MemoryRouter initialEntries={[initialEntries]}>
<Routes>
{routes}
</Routes>
</MemoryRouter>
)
}
describe('App', () => {
it('render correctly', () => {
render(withRouter(
<>
<Route path="/" element={<App />} />
<Route path="/dashboard" element={<DashBoard />} />
</>
));
expect(screen.getByText(/์ด๋ค์/)).toBeInTheDocument();
});
});
Routes
์ฌ๋ฌ ๊ฒฝ๋ก์ ๋ผ์ฐํ ๊ท์น์ ์ฒ๋ฆฌํ๋ ์ปจํ ์ด๋
์์์ผ๋ก ์ฌ๋ฌ
<Route />
์ปดํฌ๋ํธ๋ฅผ ๊ฐ๋๋ค.
interface RoutesProps {
children?: React.ReactNode;
location?: Partial<Location> | string;
}
<Routes location>
<Route />
</Routes>;
children โ ์์์ผ๋ก
<Route/>
์ปดํฌ๋ํธ๋ง ๋ฐ์ ์ ์๋ค.location โ ํ์ฌ ์์น๋ฅผ ๋ช ์์ ์ผ๋ก ์ ๊ณต, ์๋ต์ ํ์ฌ ๋ธ๋ผ์ฐ์ URL ๊ธฐ์ค์ผ๋ก ์ฒ๋ฆฌ
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/dashboard" element={<DashboardPage />} />
<Route path="*" element={<NotFound />} />
</Routes>
location์ด ๋ณ๊ฒฝ๋ ๋๋ง๋ค ํ์ ์์๋ค์ ๊ฒฝ๋ก๋ฅผ ํ์ธํ์ฌ ๊ฐ์ฅ ์ผ์นํ๋ ๊ฒฝ๋ก๋ฅผ ์ฐพ์ ํด๋น ๋ถ๊ธฐ๋ฅผ ๋ ๋๋งํ๋ค
๋งค์นญ๋๋ ๋ผ์ฐํ ๊ท์น์ด ์์ ๋ ํน์ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋ง ํ ์ ์๋ค. (catch-all ๋ผ์ฐํ )
์ค์ฒฉํ์ฌ ๋ผ์ฐํ ๊ท์น์ ์ค์ ํ ์ ์๋ค.
Route
๊ฒฝ๋ก์ ๋งค์นญ๋๋ ์ปดํฌ๋ํธ๋ฅผ ์ ์ธ์ ์ผ๋ก ์ง์
interface RouteObject {
path?: string;
index?: boolean;
children?: React.ReactNode;
caseSensitive?: boolean;
id?: string;
loader?: LoaderFunction;
action?: ActionFunction;
element?: React.ReactNode | null;
Component?: React.ComponentType | null;
errorElement?: React.ReactNode | null;
ErrorBoundary?: React.ComponentType | null;
handle?: RouteObject["handle"];
shouldRevalidate?: ShouldRevalidateFunction;
lazy?: LazyRouteFunction<RouteObject>;
}
path โ ์ปดํฌ๋ํธ์ ์ฐ๊ฒฐํ ๊ฒฝ๋ก ์ง์ ,
:
๋ก ์์ํ๋ ๊ฒฝ๋ก๋ฅผDynamic Segments
๋ผ ํ๋ค.index โ ์ธ๋ฑ์ค ๊ฒฝ๋ก ์ฌ๋ถ ์ง์
caseSensitive โ ๊ฒฝ๋ก์ ๋์๋ฌธ์๋ฅผ ์ผ์น์ํฌ์ง ์ฌ๋ถ (default false)
element / Component โ ๊ฒฝ๋ก์ ์ฐ๊ฒฐํ ์ปดํฌ๋ํธ๋ฅผ ์ง์ ํ๋ค.
Outlet
๋ผ์ฐํฐ์ ๋งค์นญ๋ ํ์์ ๋ค๋ฅธ ๋ผ์ฐํธ ์ปดํฌ๋ํธ๊ฐ ์์นํ ์์ญ์ ์ง์ (Slot ๊ฐ๋ )
์ผ๋ฐ์ ์ผ๋ก ๋ ์ด์์ ์ปดํฌ๋ํธ์ ํ์ฉ๋๋ค.
export default function Layout() {
return (
<>
<header>Header</header>
<main>
<Outlet />
</main>
<footer>Footer</footer>
</>
);
};
Layout Route
๋ผ์ฐํธ ๋งค์นญ์ ์ฐธ์ฌํ์ง ์๋ ๊ป๋ฐ๊ธฐ์ฉ ๋ผ์ฐํธ
<Routes>
<Route element={<PageLayout />}> // Layout
<Route path="/privacy" element={<Privacy />} />
<Route path="/tos" element={<Tos />} />
</Route>
<Route path="contact-us" element={<Contact />} />
</Routes>
// '/privacy' ๊ฒฝ๋ก์์ ๋ ๋๋ง๋ ๊ฒฐ๊ณผ๋ฌผ
<PageLayout>
<Privacy />
</PageLayout>
LayoutRoute Component๋ ๋ฐ๋์ ํ์ ๊ฒฝ๋ก ์์๋ฅผ ๋ ๋๋งํ <Outlet> ์ ์ถ๊ฐ ํด์ฃผ์ด์ผ ํ๋ค.
Children์ ์ฌ์ฉํ๋ฉด ์์๋๋ก ๋์ํ์ง ์์ ์ ์๋ค.
Last updated