React Router를 사용하여 단일 페이지 앱을 구축하는 방법
SPA(단일 페이지 응용 프로그램)는 웹 서버의 새 정보로 기존 웹 페이지를 동적으로 다시 작성하는 웹 사이트 또는 웹 응용 프로그램입니다.
React 애플리케이션에서 구성 요소는 사이트 콘텐츠를 검색하여 프로젝트의 단일 HTML 파일로 렌더링합니다.
React Router는 선택한 구성 요소를 탐색하고 HTML 파일로 렌더링하는 데 도움이 됩니다. 이를 사용하려면 React Router를 설정하고 React 애플리케이션과 통합하는 방법을 알아야 합니다.
React 라우터 설치 방법
JavaScript 패키지 관리자인 npm을 사용하여 React 프로젝트에 React Router를 설치하려면 프로젝트 디렉토리에서 다음 명령을 실행하십시오.
npm i react-router-dom
또는 라이브러리 패키지를 오프라인으로 설치할 수 있는 패키지 관리자인 Yarn을 사용하여 패키지를 다운로드할 수 있습니다.
Yarn을 사용하여 React Router를 설치하려면 다음 명령을 실행하십시오.
yarn add react-router-dom@6
반응 라우터 설정
React Router를 구성하고 애플리케이션에서 사용할 수 있도록 하려면 index.js 파일 내의 react-router-dom 에서 BrowserRouter 를 가져온 다음 BrowserRouter 요소에서 앱 구성 요소를 래핑합니다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
BrowserRouter 요소 에 앱 구성요소를 래핑하면 전체 앱이 라우터의 기능에 완전히 액세스할 수 있습니다.
다른 구성요소로 라우팅
애플리케이션에서 라우터를 설정한 후 앱 구성요소를 생성하고 라우팅하고 렌더링해야 합니다. 다음 코드는 “Home”, “About” 및 “Blog”라는 구성 요소를 가져오고 만듭니다. 또한 react-router-dom 에서 Route 및 Routes 요소를 가져옵니다.
앱 구성 요소 내에서 경로를 정의합니다 .
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Blog from './Blog';
function App() {
return (
<Routes>
<Route path='/' element={ <Home /> } />
<Route path='/about' element={ <About /> } />
<Route path='/blog' element={ <Blog /> }/>
</Routes>
)
}
export default App;
앱 구성 요소 는 다른 구성 요소에서 작성한 모든 코드를 렌더링하는 주요 구성 요소입니다.
Routes 요소 는 앱 구성 요소에서 만든 개별 경로를 래핑하는 상위 요소입니다. Route 요소 는 단일 경로를 생성합니다. 경로 와 요소 라는 두 가지 속성을 취합니다 .
경로 속성 은 의도한 구성 요소의 URL 경로를 정의합니다. 위 코드 블록의 첫 번째 경로는 경로로 백슬래시(/)를 사용합니다. 이는 React가 먼저 렌더링하는 특수 경로이므로 응용 프로그램을 실행할 때 Home 구성 요소가 렌더링됩니다. 이 시스템을 React 구성 요소에서 조건부 렌더링을 구현하는 것과 혼동하지 마십시오. 이 경로 속성에 원하는 이름을 지정할 수 있습니다.
요소 특성은 Route가 렌더링할 구성 요소를 정의 합니다 .
React 라우터의 링크 구성 요소 작업
링크 구성 요소 는 다른 경로를 탐색하는 데 사용되는 React Router 구성 요소입니다. 이러한 구성 요소는 생성한 다양한 경로에 액세스합니다.
예를 들어:
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<Link to='/about'>About page</Link>
<Link to='/blog'>Blog page</Link>
<h1>This is the Home Page<h1/>
</div>
)
}
export default Home;
링크 구성 요소 는 HTML 앵커 태그 <a> 와 거의 동일하며 “href” 대신 “to”라는 속성을 사용합니다. 링크 구성 요소 는 해당 경로 이름을 속성으로 사용하여 Route로 이동하고 Route의 구성 요소를 렌더링합니다.
중첩 라우팅 및 구현 방법
React Router는 중첩된 라우팅을 지원하므로 여러 경로를 단일 경로로 래핑할 수 있습니다. 경로의 URL 경로에 유사성이 있을 때 주로 사용됩니다.
라우팅하려는 구성 요소를 만든 후에는 앱 구성 요소 에서 각 구성 요소에 대한 개별 경로를 개발합니다 .
예를 들어:
import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function App() {
return (
<Routes>
<Route path='/article' element={ <Articles /> }/>
<Route path='/article/new' element={ <NewArticle /> }/>
<Route path='/article/1' element={ <ArticleOne /> }/>
</Routes>
)
}
export default App;
위의 코드 블록은 생성된 구성 요소 Articles , NewArticle 및 ArticleOne 을 가져오고 라우팅합니다 . 세 경로 사이의 URL 경로에는 몇 가지 유사점이 있습니다.
NewArticle 경로 의 경로 이름은 백슬래시(/)와 “new”라는 단어가 추가된 기사 경로의 경로 이름 과 동일하게 시작합니다 . 즉, (/new)입니다. 기사 경로와 ArticleOne 경로의 경로 이름 간의 유일한 차이점은 ArticleOne 구성 요소의 경로 이름 끝에 있는 슬래시(/1) 입니다.
세 개의 경로를 현재 상태로 두지 않고 중첩할 수 있습니다.
이렇게:
import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function App() {
return (
<Routes>
<Route path='/article'>
<Route index element={ <Articles /> }/>
<Route path='/article/new' element={ <NewArticle /> }/>
<Route path='/article/1' element={ <ArticleOne /> }/>
</Route>
</Routes>
)
}
export default App;
세 개의 개별 경로를 단일 경로 요소로 래핑했습니다. 부모 Route 요소에는 경로 속성 만 있고 렌더링할 구성 요소를 정의하는 요소 속성은 없습니다. 첫 번째 자식 Route 요소 의 index 특성은 부모 Route 의 URL 경로로 이동할 때 이 Route 가 렌더링되도록 지정합니다 .
코드를 더 좋고 유지하기 쉽게 만들려면 구성 요소에서 경로를 정의하고 사용할 앱 구성 요소로 가져와야 합니다.
예를 들어:
import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function ArticleRoutes() {
return (
<Routes>
<Route index element={ <Articles /> }/>
<Route path='/article/new' element={ <NewArticle /> }/>
<Route path='/article/1' element={ <ArticleOne /> }/>
</Routes>
)
}
export default ArticleRoutes;
위 코드 블록의 구성 요소에는 이전에 앱 구성 요소에 있었던 중첩 경로가 포함되어 있습니다. 구성 요소를 생성한 후 앱 구성 요소로 가져와서 단일 Route 요소를 사용하여 라우팅해야 합니다.
예를 들어:
import { Routes, Route } from 'react-router-dom';
import ArticleRoutes from './ArticleRoutes';
function App() {
return (
<Routes>
<Route path='/article/*' element={ <ArticleRoutes /> }>
</Routes>
)
}
export default App;
최종 경로 구성 요소에서 경로의 경로 이름 끝에 추가된 백슬래시 및 별표 기호는 경로 이름이 (/article) 로 시작하는 모든 경로 이름과 일치하도록 합니다 .
React Router에 더 많은 기능이 있습니다.
이제 React Router를 사용하여 React.js에서 단일 페이지 애플리케이션을 빌드하는 방법의 기본 사항에 익숙해졌을 것입니다.
React Router 라이브러리에는 웹 애플리케이션을 구축할 때 개발자 경험을 더욱 동적으로 만드는 더 많은 기능이 있습니다.
답글 남기기